JavaScript 开发进阶：理解 JavaScript 做用域和做用域链

时间 2019-12-12

原文原文链接

做用域是JavaScript最重要的概念之一，想要学好JavaScript就须要理解JavaScript做用域和做用域链的工做原理。今天这篇文章对JavaScript做用域和做用域链做简单的介绍，但愿能帮助你们更好的学习JavaScript。javascript

JavaScript做用域

　　任何程序设计语言都有做用域的概念，简单的说，做用域就是变量与函数的可访问范围，即做用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的做用域有全局做用域和局部做用域两种。html

　　1. 全局做用域（Global Scope）

　　在代码中任何地方都能访问到的对象拥有全局做用域，通常来讲如下几种情形拥有全局做用域：前端

　　（1）最外层函数和在最外层函数外面定义的变量拥有全局做用域，例如：java

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

　　（2）全部末定义直接赋值的变量自动声明为拥有全局做用域，例如：函数

 
         function 
         doSomething(){ 
        
         var 
         authorName= 
         "山边小溪" 
         ; 
        
         blogName= 
         "梦想天空" 
         ; 
        
         alert(authorName); 
        
         } 
        
         doSomething();  
         //山边小溪 
        
         alert(blogName);  
         //梦想天空 
        
         alert(authorName);  
         //脚本错误

　　变量blogName拥有全局做用域，而authorName在函数外部没法访问到。性能

　　（3）全部window对象的属性拥有全局做用域学习

　　通常状况下，window对象的内置属性都拥有全局做用域，例如window.name、window.location、window.top等等。优化

　　1. 局部做用域（Local Scope）　　

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

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

做用域链（Scope Chain）

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

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

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

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

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

 
         var 
         total = add(5,10);

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

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

　　在函数执行过程当中，没遇到一个变量，都会经历一次标识符解析过程以决定从哪里获取和存储数据。该过程从做用域链头部，也就是从活动对象开始搜索，查找同名的标识符，若是找到了就使用这个标识符对应的变量，若是没找到继续搜索做用域链中的下一个对象，若是搜索完全部对象都未找到，则认为该标识符未定义。函数执行过程当中，每一个标识符都要经历这样的搜索过程。

做用域链和代码优化

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

 
         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子句中惟一执行的代码。该函数接收异常对象做为参数，这样你能够更加灵活和统一的处理错误。因为只执行一条语句，且没有局部变量的访问，做用域链的临时改变就不会影响代码性能了。

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