Javascript作用域原理

28 May 09 Javascript作用域原理

• 作者: Laruence(   )
• 本文地址: http://www.laruence.com/2009/05/28/863.html
• 转载请注明出处

问题的提出

首先看一个例子:

<ol style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; list-style-type: none;"><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">var</span> name <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">=</span> <span class="sh_string" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(168, 255, 96);">'laruence'</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">;</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">function</span> <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">echo</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">()</span> <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">{</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">alert</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">(</span>name<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">);</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">var</span> name <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">=</span> <span class="sh_string" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(168, 255, 96);">'eve'</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">;</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">alert</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">(</span>name<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">);</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">alert</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">(</span>age<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">);</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">}</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"> </li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">echo</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">();</span></li></ol>

运行结果是什么呢?

上面的问题, 我相信会有很多人会认为是:

<ol style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; list-style-type: none;"><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">laruence</li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">eve</li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">[脚本出错]</li></ol>

因为会以为在echo中, 第一次alert的时候, 会取到全局变量name的值, 而第二次值被局部变量name覆盖, 所以第二次alert是’eve’. 而age属性没有定义, 所以脚本会出错.

但其实, 运行结果应该是:

<ol style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; list-style-type: none;"><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">undefined</li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">eve</li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">[脚本出错]</li></ol>

为什么呢?

JavaScript的作用域链

首先让让我们来看看Javasript(简称JS, 不完全代表JScript)的作用域的原理: JS权威指南中有一句很精辟的描述:　”JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.”　

为了接下来的知识, 你能顺利理解, 我再提醒一下, 在JS中:”一切皆是对象, 函数也是”.

在JS中，作用域的概念和其他语言差不多， 在每次调用一个函数的时候 ，就会进入一个函数内的作用域，当从函数返回以后，就返回调用前的作用域.

JS的语法风格和C/C++类似, 但作用域的实现却和C/C++不同，并非用“堆栈”方式，而是使用列表，具体过程如下(ECMA262中所述):
任何执行上下文时刻的作用域, 都是由作用域链(scope chain, 后面介绍)来实现.
在一个函数被定义的时候, 会将它定义时刻的scope chain链接到这个函数对象的[[scope]]属性.
在一个函数对象被调用的时候，会创建一个活动对象(也就是一个对象), 然后对于每一个函数的形参，都命名为该活动对象的命名属性, 然后将这个活动对象做为此时的作用域链(scope chain)最前端, 并将这个函数对象的[[scope]]加入到scope chain中.

看个例子:

<ol style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; list-style-type: none;"><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">var</span> func <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">=</span> <span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">function</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">(</span>lps<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">,</span> rps<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">)</span><span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">{</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">          <span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">var</span> name <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">=</span> <span class="sh_string" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(168, 255, 96);">'laruence'</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">;</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">          <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">........</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">}</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">func</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">();</span></li></ol>

在执行func的定义语句的时候, 会创建一个这个函数对象的[[scope]]属性(内部属性,只有JS引擎可以访问, 但FireFox的几个引擎(SpiderMonkey和Rhino)提供了私有属性__parent__来访问它), 并将这个[[scope]]属性, 链接到定义它的作用域链上(后面会详细介绍), 此时因为func定义在全局环境, 所以此时的[[scope]]只是指向全局活动对象window active object.

在调用func的时候, 会创建一个活动对象(假设为aObj, 由JS引擎预编译时刻创建, 后面会介绍)，并创建arguments属性, 然后会给这个对象添加俩个命名属性aObj.lps, aObj.rps; 对于每一个在这个函数中申明的局部变量和函数定义, 都作为该活动对象的同名命名属性.

然后将调用参数赋值给形参数，对于缺少的调用参数，赋值为undefined。

然后将这个活动对象做为scope chain的最前端, 并将func的[[scope]]属性所指向的,定义func时候的顶级活动对象, 加入到scope chain.

有了上面的作用域链, 在发生标识符解析的时候, 就会逆向查询当前scope chain列表的每一个活动对象的属性，如果找到同名的就返回。找不到，那就是这个标识符没有被定义。

注意到, 因为函数对象的[[scope]]属性是在定义一个函数的时候决定的, 而非调用的时候, 所以如下面的例子:

<ol style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; list-style-type: none;"><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">var</span> name <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">=</span> <span class="sh_string" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(168, 255, 96);">'laruence'</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">;</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">function</span> <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">echo</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">()</span> <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">{</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">          <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">alert</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">(</span>name<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">);</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">}</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"> </li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">function</span> <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">env</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">()</span> <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">{</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">          <span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">var</span> name <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">=</span> <span class="sh_string" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(168, 255, 96);">'eve'</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">;</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">          <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">echo</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">();</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">}</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"> </li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">env</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">();</span></li></ol>

运行结果是:

<ol style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; list-style-type: none;"><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">laruence</li></ol>

结合上面的知识, 我们来看看下面这个例子:

<ol style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; list-style-type: none;"><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">function</span> <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">factory</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">()</span> <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">{</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">var</span> name <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">=</span> <span class="sh_string" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(168, 255, 96);">'laruence'</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">;</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">var</span> intro <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">=</span> <span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">function</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">()</span><span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">{</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">          <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">alert</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">(</span><span class="sh_string" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(168, 255, 96);">'I am '</span> <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">+</span> name<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">);</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">}</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">return</span> intro<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">;</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">}</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"> </li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">function</span> <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">app</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">(</span>para<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">)</span><span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">{</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">var</span> name <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">=</span> para<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">;</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">var</span> func <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">=</span> <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">factory</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">();</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">func</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">();</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">}</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"> </li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">app</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">(</span><span class="sh_string" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(168, 255, 96);">'eve'</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">);</span></li></ol>

当调用app的时候, scope chain是由: {window活动对象(全局)}->{app的活动对象} 组成.

在刚进入app函数体时, app的活动对象有一个arguments属性, 俩个值为undefined的属性: name和func. 和一个值为’eve’的属性para;

此时的scope chain如下:

<ol style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; list-style-type: none;"><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">[[</span>scope chain<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">]]</span> <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">=</span> <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">[</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">{</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     para <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">:</span> <span class="sh_string" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(168, 255, 96);">'eve'</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">,</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     name <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">:</span> <span class="sh_predef_var" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">undefined</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">,</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     func <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">:</span> <span class="sh_predef_var" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">undefined</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">,</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_predef_var" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">arguments</span> <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">:</span> <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">[]</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">}</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">,</span> <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">{</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     window call object</li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">}</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">]</span></li></ol>

当调用进入factory的函数体的时候, 此时的factory的scope chain为:

<ol style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; list-style-type: none;"><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">[[</span>scope chain<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">]]</span> <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">=</span> <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">[</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">{</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     name <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">:</span> <span class="sh_predef_var" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">undefined</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">,</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     intor <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">:</span> <span class="sh_predef_var" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">undefined</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">}</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">,</span> <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">{</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     window call object</li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">}</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">]</span></li></ol>

注意到, 此时的作用域链中, 并不包含app的活动对象.

在定义intro函数的时候, intro函数的[[scope]]为:

<ol style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; list-style-type: none;"><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">[[</span>scope chain<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">]]</span> <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">=</span> <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">[</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">{</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     name <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">:</span> <span class="sh_string" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(168, 255, 96);">'laruence'</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">,</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     intor <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">:</span> <span class="sh_predef_var" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">undefined</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">}</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">,</span> <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">{</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     window call object</li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">}</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">]</span></li></ol>

从factory函数返回以后,在app体内调用intor的时候, 发生了标识符解析, 而此时的sope chain是:

<ol style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; list-style-type: none;"><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">[[</span>scope chain<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">]]</span> <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">=</span> <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">[</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">{</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     intro call object</li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">}</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">,</span> <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">{</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     name <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">:</span> <span class="sh_string" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(168, 255, 96);">'laruence'</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">,</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     intor <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">:</span> <span class="sh_predef_var" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">undefined</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">}</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">,</span> <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">{</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     window call object</li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">}</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">]</span></li></ol>

因为scope chain中,并不包含factory活动对象. 所以, name标识符解析的结果应该是factory活动对象中的name属性, 也就是’laruence’.

所以运行结果是:

<ol style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; list-style-type: none;"><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">I am laruence</li></ol>

现在, 大家对”JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.”这句话, 应该有了个全面的认识了吧?

Javascript的预编译

我们都知道,JS是一种脚本语言, JS的执行过程, 是一种翻译执行的过程.
那么JS的执行中, 有没有类似编译的过程呢?

首先, 我们来看一个例子:

<ol style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; list-style-type: none;"><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><</span>script<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">></span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">alert</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">(</span>typeof eve<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">);</span> <span class="sh_comment" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(124, 124, 124);">//function</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">          <span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">function</span> <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">eve</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">()</span> <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">{</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">               <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">alert</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">(</span><span class="sh_string" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(168, 255, 96);">'I am Laruence'</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">);</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">          <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">}</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">;</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"></</span>script<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">></span></li></ol>

诶? 在alert的时候, eve不是应该还是未定义的么? 怎么eve的类型还是function呢?

恩, 对, 在JS中, 是有预编译的过程的, JS在执行每一段JS代码之前, 都会首先处理var关键字和function定义式(函数定义式和函数表达式).
如上文所说, 在调用函数执行之前, 会首先创建一个活动对象, 然后搜寻这个函数中的局部变量定义,和函数定义, 将变量名和函数名都做为这个活动对象的同名属性, 对于局部变量定义,变量的值会在真正执行的时候才计算, 此时只是简单的赋为undefined.

而对于函数的定义,是一个要注意的地方:

<ol style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; list-style-type: none;"><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><</span>script<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">></span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">alert</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">(</span><span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">typeof</span> eve<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">);</span> <span class="sh_comment" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(124, 124, 124);">//结果:function</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">alert</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">(</span><span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">typeof</span> walle<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">);</span> <span class="sh_comment" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(124, 124, 124);">//结果:undefined</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">function</span> <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">eve</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">()</span> <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">{</span> <span class="sh_comment" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(124, 124, 124);">//函数定义式</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">          <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">alert</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">(</span><span class="sh_string" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(168, 255, 96);">'I am Laruence'</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">);</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">}</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">;</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">var</span> walle <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">=</span> <span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">function</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">()</span> <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">{</span> <span class="sh_comment" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(124, 124, 124);">//函数表达式</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">}</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">alert</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">(</span><span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">typeof</span> walle<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">);</span> <span class="sh_comment" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(124, 124, 124);">//结果:function</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"></</span>script<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">></span></li></ol>

这就是函数定义式和函数表达式的不同, 对于函数定义式, 会将函数定义提前. 而函数表达式, 会在执行过程中才计算.

说到这里, 顺便说一个问题 :

<ol style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; list-style-type: none;"><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">var</span> name <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">=</span> <span class="sh_string" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(168, 255, 96);">'laruence'</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">;</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     age <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">=</span> <span class="sh_number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 115, 253);">26</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">;</span></li></ol>

我们都知道不使用var关键字定义的变量, 相当于是全局变量, 联系到我们刚才的知识:

在对age做标识符解析的时候, 因为是写操作, 所以当找到到全局的window活动对象的时候都没有找到这个标识符的时候, 会在window活动对象的基础上, 返回一个值为undefined的age属性.

也就是说, age会被定义在顶级作用域中.

现在, 也许你注意到了我刚才说的: JS在执行每一段JS代码..
对, 让我们看看下面的例子:

<ol style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; list-style-type: none;"><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><</span>script<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">></span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">alert</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">(</span><span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">typeof</span> eve<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">);</span> <span class="sh_comment" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(124, 124, 124);">//结果:undefined</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"></</span>script<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">></span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><</span>script<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">></span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(150, 203, 254);">function</span> <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">eve</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">()</span> <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">{</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">          <span class="sh_function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(255, 210, 167);">alert</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">(</span><span class="sh_string" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; color: rgb(168, 255, 96);">'I am Laruence'</span><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">);</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">     <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">}</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"></</span>script<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">></span></li></ol>

明白了么? 也就是JS的预编译是以段为处理单元的…

揭开谜底

现在让我们回到我们的第一个问题:

当echo函数被调用的时候, echo的活动对象已经被预编译过程创建, 此时echo的活动对象为:

<ol style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; list-style-type: none;"><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">[</span>callObj<span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">]</span> <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">=</span> <span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">{</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">name <span class="sh_symbol" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">:</span> <span class="sh_predef_var" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">undefined</span></li><li style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;"><span class="sh_cbracket" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">}</span></li></ol>

当第一次alert的时候, 发生了标识符解析, 在echo的活动对象中找到了name属性, 所以这个name属性, 完全的遮挡了全局活动对象中的name属性.

现在你明白了吧?