脚本执行方式 - 文档加载 - 面向浏览器编程

原文： http://pij.robinqu.me/Browser_Scripting/Document_Loading/ScriptExecution.html

源代码： https://github.com/RobinQu/Programing-In-Javascript/blob/master/chapters/Browser_Scripting/Document_Loading/ScriptExecution.md

• 本文需要补充更多例子
• 本文存在批注，但该网站的Markdown编辑器不支持，所以无法正常展示，请到原文参考。

脚本执行方式

执行入口

• script标签
• eval函数
• Function构造函数
• setTimeout和setInterval函数
• HTML标签内的事件绑定相关的內联函数（onclick等）
• 其他hacks

script标签

最基本，最常用的脚本引入方式。例如：

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

尽管在HTML4和XHTML里面，要求开发者使用type属性来制定脚本的类型。但是主流浏览器都默认认为脚本类型是text/javascript。

在HTML5的规范内¹，script标签的type属性是完全可选的。

eval函数

• eval is evil
• eval有访问本地scope的权利

var a = 1;
eval("a=2");
a === 2; // ==> true

Function构造函数

• function是“first-class citizen”²；自然有相应的构造函数
• new Function(arg1, arg2, ..., fnStr)
• Function³构造函数本质是创建一个函数对象；其创建的函数执行也并不能访问其所在创建环境的闭包，只能访问本地作用域（local scope）和全局作用域（global scope）
• Function()和new Function()效果一样

(function() {
  var a = 1;
  var func = new Function("a=2");
  func();
  a === 2; // ==> false
}());
a === 2; // ==> true

setTimeout和setInterval

setTimeout("alert('haha')", 0);

这个和eval有异曲同工之妙，对作用域的访问也是类似的。

另外要说名，以上几点，除了script标签的方法之外，其他方法都在strict模式⁴下不可用。

HTML內联事件回调

<a href='#hello' onclick="alert(this.href)">Say hello</a>

这样如同在click事件的Target Phase运行了一个回调。this指向目标元素本身。

其他Hack

利用MessageChannel等新特性可以触发一些函数的执行⁵。也许Javascript的其他的角落也有不少其他执行脚本的入口吧。

---

1. http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#the-script-element ↩

2. https://developer.mozilla.org/en-US/docs/functional-javascript/First-class_citizen ↩

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function ↩

4. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode ↩

5. https://github.com/kriskowal/asap/blob/master/asap.js ↩