js学习--变量作用域和作用域链

作为一名菜鸟的我，每天学点的感觉还是不错的。今天学习闭包的过程中看到作用域与作用域链这两个概念，我觉得作为一名有追求的小白，有必要详细了解下。

变量的作用域

就js变量而言，有全局变量和局部变量。这里我觉得这个按字面意思理解就行了.......下面举个例子

var message = "今天我做的糯米蒸排骨"; //定义一个全局变量

function doL(){

　　var ss = "侠客行很好看";      //定义一个局部变量

　　alert(message);             //输出"今天我做的糯米蒸排骨",在函数中可以引用到全局变量

　　function alertDo(){

　　　　alert(ss);

　　}

　　alertDo();             //输出"侠客行很好看",这就涉及变量的作用域了

};
doL();
alertDo();              //没法输出  alertDo is not defined

alert(message);         //可以输出"今天我做的糯米蒸排骨"

 这边有2个很有意思的地方

1.当变量不用var声明的时候我们实际上声明了一个全局变量，好吧，这是错误的,看下面，num是一个全局变量，

而 mum = 1；

事实上是对属性赋值操作。首先，它会尝试在当前作用域链（如在方法中声明，则当前作用域链代表全局作用域和方法局部作用域etc。。。）中解析 mum ； 如果在任何当前作用域链中找到mum ，则会执行对mum 属性赋值； 如果没有找到mum ，它才会在全局对象（即当前作用域链的最顶层对象，如window对象）中创造mum 属性并赋值。

注意！它并不是声明了一个全局变量，而是创建了一个全局对象的属性。由于变量声明自带不可删除属性，比较var num = 1 跟 num = 1，前者是变量声明，带不可删除属性，因此无法被删除；后者为全局变量的一个属性，因此可以从全局变量中删除。

var num =1;
mum = 1;

2.变量声明会提前到函数顶部，其实之前已经遇到过了

    var scope="global";  
    function t(){  
        console.log(scope);  
        var scope="local"  
        console.log(scope);  
    }  
    t();  

 

它首先会输出undefined,然后才是scope，它会将变量提前声明并且覆盖局部变量，等价于下面这种情况

    var scope="global";  
    function t(){  
        var scope；
        console.log(scope);  
        scope="local"  
        console.log(scope);  
    }  
    t();  

 另外，在js中是没有块作用域这么一说的

例如

if（true）
{
    var ss = 1;
}
alert(ss);        //这边是可以正常输出的，和java不太一样

 

变量的作用域链

作用域链：由于js的变量都是对象的属性，而该对象可能又是其它对象的属性，而所有的对象都是window对象的属性，所以这些对象的关系可以看作是一条链
链头就是变量所处的对象，链尾就是window对象

举个例子吧

function a(){
   var q = 1;
   function b(){
       var w = 2;
   }                
}

 

js中函数也是对象，所以变量q所在的对象是a，a又在window对象中，所以q的作用域链如下
a--window
那么w所以在的对象即b，b又包含在a中，a又在window对象，所以w的作用域链如下
b--a--window

 

函数的作用域链

在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，然后此对象会被推入作用域链的前端，当运行期上下文被销毁，活动对象也随之销毁。新的作用域链如下图所示：

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

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

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";
    };
}

 

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

以上函数的作用域链盗版梦想天空的博客，原地址为http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html