JavaScript作用域与作用域链的探讨

        首先感谢网上的朋友们写了那么多精彩的博客详细介绍了JavaScript的作用域和作用域链。特别是以下的两篇博客讲的特别精彩，链接如下：

        http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html

        http://www.laruence.com/2009/05/28/863.html

        我也记录了关于我对JavaScript作用域和作用域链的一些见解，下面我就开始介绍相关的知识。

       

        问题的提出

        如下JavaScript代码，请问输出什么？

    var name = 'laruence';    function echo() {        alert(name);        var name = 'eve';        alert(name);        alert(age);    }    echo();

       有人觉得输出应该是：

 laruence eve [脚本出错]

      我刚开始也觉得应该输出这样，可是当我将JS代码运行时，我才知道结果应该是：

 undefined eve [脚本出错]

      为什么是这样呢？这需要我们深入理解JavaScript的作用域和作用域链，咱们往下看吧。

      任何程序设计语言都有作用域的概念，简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。在JS权威指南中，有一句话很精辟的描述了JS作用域的原理："JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里"。

      JS中一切皆是对象，当然函数也是对象。JS虽然语法风格类似C/C++，但作用域却与C/C++不同，并非是采用“堆栈”方式，而是使用列表。上面谈到JS作用域有全局的作用域和局部的作用域。下面咱们就从JS的作用域谈起。

     

       JS的全局作用域（Global Scope）

       1.最外层函数和在最外层函数外面定义的变量拥有全局作用域。例如：

     var authorName = "山边小溪";     //全局    function doSomething() {        //doSomething(函数)全局        var blogName = "梦想天空";   //局部        function innerSay() {      //innerSay(函数)局部            alert(blogName);        }        innerSay();    }    alert(authorName); //山边小溪    alert(blogName); //脚本错误，blogName是局部变量，外层访问不到    doSomething(); //梦想天空    innerSay() //脚本错误，局部变量，外层访问不到

         2.所有末定义直接赋值的变量自动声明为拥有全局作用域。例如：

    function doSomething() {       var authorName = "山边小溪"; //局部作用域        blogName = "梦想天空";       //直接赋值,自动声明为全局作用域        alert(authorName);    }    doSomething(); //山边小溪     alert(blogName); //梦想天空     alert(authorName); //脚本错误

        3.所有window对象的属性拥有全局作用域。例如：

        一般情况下，window对象的内置属性都拥有全局作用域，例如window.name、window.location、window.top等。
       

        JS局部作用域

        和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域称为函数作用域，例如下列代码中的blogName和函数innerSay都只拥有局部作用域。

    function doSomething() {        var blogName = "梦想天空";        function innerSay() {            alert(blogName);        }        innerSay();    }    alert(blogName); //脚本错误     innerSay(); //脚本错误

       

        作用域链（Scope Chain）

        在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。

　　当一个函数创建后，它的作用域链会被创建此函数的作用域中可访问的数据对象填充。例如定义下面这样一个函数：

   function add(num1, num2) {        var sum = num1 + num2;        return sum;    }

       在函数add创建时，它的作用域链中会填入一个全局对象，该全局对象包含了所有全局变量，如下图所示（注意：图片只例举了全部变量中的一部分）：如图所示：

      

        函数add的作用域将会在执行时用到。例如执行如下代码：

   var total = add(5,10);

　　执行此函数时会创建一个称为“运行期上下文(execution context)”的内部对象，运行期上下文定义了函数执行时的环境。每个运行期上下文都有自己的作用域链，用于标识符解析，当运行期上下文被创建时，而它的作用域链初始化为当前运行函数的[[Scope]]所包含的对象。

　　这些值按照它们出现在函数中的顺序被复制到运行期上下文的作用域链中。它们共同组成了一个新的对象，叫“活动对象(activation object)”，该对象包含了函数的所有局部变量、命名参数、参数集合以及this，然后此对象会被推入作用域链的前端，当运行期上下文被销毁，活动对象也随之销毁。新的作用域链如下图所示：

       

         在函数执行过程中，没遇到一个变量，都会经历一次标识符解析过程以决定从哪里获取和存储数据。该过程从作用域链头部，也就是从活动对象开始搜索，查找同名的标识符，如果找到了就使用这个标识符对应的变量，如果没找到继续搜索作用域链中的下一个对象，如果搜索完所有对象都未找到，则认为该标识符未定义。函数执行过程中，每个标识符都要经历这样的搜索过程。详细的例子可以浏览该网页：http://www.laruence.com/2009/05/28/863.html

        

         作用域链和代码优化

         从作用域链的结构可以看出，在运行期上下文的作用域链中，标识符所在的位置越深，读写速度就会越慢。如上图所示，因为全局变量总是存在于运行期上下文作用域链的最末端，因此在标识符解析的时候，查找全局变量是最慢的。所以，在编写代码的时候应尽量少使用全局变量，尽可能使用局部变量。一个好的经验法则是：如果一个跨作用域的对象被引用了一次以上，则先把它存储到局部变量里再使用。例如下面的代码：

    function changeColor(){document.getElementById("btnChange").onclick=function(){document.getElementById("targetCanvas").style.backgroundColor="red";};    }

　　这个函数引用了两次全局变量document，查找该变量必须遍历整个作用域链，直到最后在全局对象中才能找到。这段代码可以重写如下：

    function changeColor(){var doc=document;doc.getElementById("btnChange").onclick=function(){doc.getElementById("targetCanvas").style.backgroundColor="red";};    }

　　这段代码比较简单，重写后不会显示出巨大的性能提升，但是如果程序中有大量的全局变量被从反复访问，那么重写后的代码性能会有显著改善。

 

        改变作用域链

        函数每次执行时对应的运行期上下文都是独一无二的，所以多次调用同一个函数就会导致创建多个运行期上下文，当函数执行完毕，执行上下文会被销毁。每一个运行期上下文都和一个作用域链关联。一般情况下，在运行期上下文运行的过程中，其作用域链只会被 with 语句和 catch 语句影响。

　　with语句是对象的快捷应用方式，用来避免书写重复代码。例如：

      function initUI(){with(document){var bd=body,links=getElementsByTagName("a"),i=0,len=links.length;while(i < len){update(links[i++]);}getElementById("btnInit").onclick=function(){doSomething();};}      }

　　这里使用width语句来避免多次书写document，看上去更高效，实际上产生了性能问题。

　　当代码运行到with语句时，运行期上下文的作用域链临时被改变了。一个新的可变对象被创建，它包含了参数指定的对象的所有属性。这个对象将被推入作用域链的头部，这意味着函数的所有局部变量现在处于第二个作用域链对象中，因此访问代价更高了。如下图所示：

       

         因此在程序中应避免使用with语句，在这个例子中，只要简单的把document存储在一个局部变量中就可以提升性能。

　　 另外一个会改变作用域链的是try-catch语句中的catch语句。当try代码块中发生错误时，执行过程会跳转到catch语句，然后把异常对象推入一个可变对象并置于作用域的头部。在catch代码块内部，函数的所有局部变量将会被放在第二个作用域链对象中。示例代码：

   try{doSomething();   }catch(ex){alert(ex.message); //作用域链在此处改变   }

　　请注意，一旦catch语句执行完毕，作用域链机会返回到之前的状态。try-catch语句在代码调试和异常处理中非常有用，因此不建议完全避免。你可以通过优化代码来减少catch语句对性能的影响。一个很好的模式是将错误委托给一个函数处理，例如：

  try{doSomething();  }catch(ex){handleError(ex); //委托给处理器方法  }

　　优化后的代码，handleError方法是catch子句中唯一执行的代码。该函数接收异常对象作为参数，这样你可以更加灵活和统一的处理错误。由于只执行一条语句，且没有局部变量的访问，作用域链的临时改变就不会影响代码性能了。

 

         JavaScript的预编译过程

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

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

    alert(typeof eve);  //输出function      function eve() {        alert('I am Laruence');              };

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

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

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

    alert(typeof eve);   //结果:function         alert(typeof walle); //结果:undefined         function eve() {     //函数定义式                  alert('I am Laruence');         };         var walle = function() { //函数表达式         }         alert(typeof walle); //结果:function

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

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

   var name = 'laruence';        age = 26;

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

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

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

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

   <script>             alert(typeof eve); //结果:undefined   </script>   <script>       function eve() { alert('I am Laruence'); }   </script>

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

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

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

[callObj] = {
name : undefined
}

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