JavaScript浅析 -- 作用域和作用域链

一、作用域

所谓作用域，简单来说就是变量和函数的可访问范围。举个例子：

function test() {
    var a = 1;
    console.log(a); // 输出1
}
console.log(a); // 会报错，找不到a

上面test函数中的变量a拥有一个函数作用域，只能在函数里可以访问到，但在函数外面console.log(a)则访问不到会报错。

JS有两个作用域，全局作用域和局部作用域（又叫函数作用域）。

1. 局部作用域：只在某个特定的代码块里才能访问。比如开头的例子变量a，只能在函数包裹起来的那块内部区域里能被访问。常见于函数内部，如下的形式中从 ‘{’ 开始到与之匹配的 ‘}’ 结束，for、if、switch等包裹起来的不算。

function test() { 
    // 局部作用域
}
或者
var test = function() {
    // 局部作用域
}

2. 全局作用域：在代码中所有地方都能够访问其中变量和函数的作用范围。有下面三种情况可以拥有全局作用域：

• 最外层函数和最外层函数之外定义的变量拥有全局作用域。
• 未定义直接赋值的对象自动变为全局变量，拥有全局作用域。
• window对象的所有属性拥有全局作用域。

二、作用域链

在讲作用域链前，我们先来讲讲变量对象。

• 变量对象：每个函数都有自己的执行环境，每个环境都有与之关联的变量对象，执行环境中定义的变量和函数都保存在这个对象中。由于在同个执行环境里定义的变量和函数拥有相同的作用域，所以同个变量对象里保存的变量和函数拥有相同的作用域。（在web浏览器中，全局执行环境对应的变量对象为window对象，所以如上面所说window对象的属性才会有全局作用域）。

而代码在环境中执行时，会创建变量对象的一个作用域链。作用域链的前端，是当前执行代码所在环境的变量对象，然后是包含环境（即当前函数所在的执行环境）的变量对象，一直延续到全局执行环境，即全局环境的变量对象始终是作用域链中的最后一个对象。举个例子：

var outVariable = '最外层变量';
function outFunction() { // 最外层函数
    var innerVariable = '内部变量';
    function innerFunction() { // 内部函数
        var variable = '内部函数的变量';
    } 
}

上面这个例子，在inner函数的执行环境中的作用域链如下：

作用域链

由图可以看到，作用域链的开头是当前执行代码所在环境的变量对象，末尾是全局变量对象。

那作用域链有什么用？作用域链的用途，是保证对执行环境有权访问的所有变量和函数的有序访问。要理解这句话，重点在于理解有权和有序这两个字。

• 有权：只有在当前执行环境的作用域链上变量对象的变量和函数才能访问到。
• 有序：当查找一个变量时，先在当前的变量对象里找，找不到再到作用域链的上一个变量对象中找，一直到作用域链的末尾即全局变量对象，如果还没有则报错。

var outVariable = '最外层变量';
function outFunction() {
    function firstFunc() {
        var firstFuncVariable = '第一个函数的变量';
        console.log(outVariable); // 输出'最外层变量'
    } 
    function secondFunc() {
        var secondFuncVariable = '第二个函数的变量';
        console.log(firstFuncVariable); // 报错
    }
}

这段代码中函数firstFunc和函数secondFunc的作用域链分别为：

作用域链例子

根据上图，当第一个函数要访问outVariable变量时，先找1里有没有，没有再找2里也没有，再找3找到outVariable则返回。而第二个函数要访问firstFuncVariable时，先找4没有，再找5没有，最后找到6还没有所以报错，这个一层一层的搜索就是沿着作用域链的顺序来的。而secondFunc的作用域链上并没有firstFunc的变量对象，所以无权访问其中的变量。