JavaScript 作用域、作用域链

变量作用域

一个变量的作用域(scope)是程序源代码中定义这个变量的区域。

变量的作用域无非就是两种：全局变量和局部变量。

• 全局作用域：
• 最外层函数定义的变量拥有全局作用域，即对任何内部函数来说，都是可以访问的：

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

• 局部作用域：
• 和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，而对于函数外部是无法访问的，最常见的例如：函数内部

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

需要注意的是，函数内部声明变量的时候，一定要使用var语句。如果不用的话，你实际上声明了一个全局变量！

    function checkScope(){
        scope = "global scope"; 
    }
    checkScope();
    console.log(scope);

再来看一个代码

• 在函数体内，局部变量的优先级高于同名的全局变量。

    var scope = "global";
    function checkScope(){
        var scope = "local";    //同名的局部变量
        return scope;           //返回局部变量的值
    }
    checkScope()

• 声明局部变量时必须使用var语句

看下面这个

    scope = "global";
    function checkScope2(){
        scope = "local";        //修改了全局变量
        myscope = "local";      //声明了一个全新的全局变量
        return [scope,myscope]; //返回两个值
    }
    checkScope2()   // => ["local","local"]
    scope           // => "local"   全局变量修改了
    myscope         // => "local"   全局命名空间乱了

函数定义是可以嵌套的。由于每个函数都有它自己的作用域，因此会出现几个局部作用域嵌套的情况，例如：

    var scope = "global scope";             //全局变量
    function checkScope(){          
        var scope = "local scope";          //局部变量
        function nested(){
            var scope = "nested scope";     //嵌套作用域内的局部变量
            return scope;                   //返回当前作用域内的局部变量
        }
        return nested();
    }
    checkScope();                           // => "嵌套作用域"

函数作用域和声明提前

在一些类似C语言的编程语言中，花括号内的每一段代码都具有各自的作用域，而且变量在声明它们的代码段之外是不可见的，称为块级作用域(block scope)，而JavaScript中没有块级作用域。JavaScript取而代之地使用了函数作用域(function scope):变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。

比如

C语言(块级作用域)：

    for(int i = 0; i < 10; i++){
        //i的作用范围只在这个for循环
    }
    printf("%d",&i);//error

JavaScript(函数作用域)：

    for(var i = 1; i < 10; i++){
        console.log(i);
    }
    console.log(i); //10  

JavaScript的函数作用域是指在函数内声明的所有变量在函数体内始终是可见的，有意思的是，这意味着变量在声明之前甚至已经可用。JavaScript的这个特性被非正式地称为声明提前，即JavaScript函数里声明的所有变量（但不涉及赋值）都被”提前”至函数体的顶部。

    var scope = "glocal";
    function f(){
        console.log(scope);     //输出"undefined",而不是"global"
        var scope = "local";    //变量在这里赋初始值，但变量本身在函数体内任何地方均是有定义的
        console.log(scope);     //输出"local"
    }

可能会误认为第一行会输出“global”，因为代码还没有执行到var语句声明局部变量的地方。其实不然，由于函数作用域的特性，局部变量在整个函数体始终是有定义的，也就是说，在函数体内局部变量覆盖了同名全局变量。尽管如此，只有在程序执行到var语句的时候，局部变量才会被真正赋值。因此，上述过程等价于：将函数内的变量声明“提前”至函数顶部，同时变量初始化留在原来的位置：

    function f(){
        var scope;              // 在函数定部声明了局部变量
        console.log(scope);     // 变量存在，其值为undefined
        scope = "local";        // 初始化并赋值
        console.log(scope);     // 输出local
    }

在具有块级作用域的编程语言中，在狭小的作用域里让变量声明和使用变量的代码尽可能靠近彼此，通常来讲，这是一个非常不错的编程习惯。由于JavaScript没有块级作用域，因此一些程序员特意将变量声明放在函数体顶部，而不是将声明靠近放在使用变量之处。这种做法使得他们的源代码非常清晰地反映了真实的变量作用域。

作用域链

JavaScript是基于词法作用域的语言: 通过阅读包含变量定义在内的数行源码就能知道变量的作用域。全局变量在程序中始终都是有定义的。局部变量在声明它的函数体内以及其所嵌套的函数内始终是有定义的。

如果将一个局部变量看做是自定义实现的对象的属性的话，那么可以换个角度来解读变量作用域。每一段JavaScripl代码(全局代码或函数) 都有一个与之关联的作用域链(scope chain)。这个作用域链是一个对象列表或者链表，这组对象定义了这段代码“作用域中”的变量。当JavaScript需要查找变量x的值的时候(这个过程称做“变量解析’(variable resolution))，它会从链中的第一个对象开始查找，如果这个对象有一个名为x的属性，则会直接使用这个属性的值，如果第一个对象中不存在名为x的属性，JavaScript会继续查找链上的下一个对象。如果第二个对象依然没有名为x的属性，则会继续查找下一个对象，以此类推。如果作用域链上没有任何一个对象含有属性x，那么就认为这段代码的作用域链上不存在x，并最终抛出一个引用错误(ReferenceError) 异常。

• 在JavaScript的最顶层代码中(也就是不包含在任何函数定义内的代码)，作用域链由个全局对象组成。

• 在不包含嵌套的函数体内，作用域链上有两个对象，第一个是定义函数参数和局部变量的对象，第二个是全局对象。

• 在一个嵌套的函数体内，作用城链上至少有三个对象。理解对象链的创建规则是非常重要的。当定义一个函数时，它实际上保存一个作用域链。当调用这个函数时，它创建一个新的对象来存储它的局部变量，并将这个对象添加至保存的那个作用域链上，同时创建一个新的更长的表示函数调用作用域的“链”。

对于嵌套函数来讲，事情变得更加有趣，每次调用外部函数时，内部函数又会重新定义一遍。因为每次调用外部函数的时候，作用域链都是不同的。内部函数在每次定义的时候都有微妙的差别一一在每次调用外部函数时，内部函数的代码都是相同的，而且关联这段代码的作用域链也不相同。

参考：《JavaScript权威指南》第6版