作用域与作用域链

简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在 JavaScript 中，变量的作用域有全局作用域和局部作用域两种。

全局作用域


在代码中任何地方都能访问到的对象拥有全局作用域，一般来说以下几种情形拥有全局作用域：

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

1
2
3
4
5
6
7
8
9
10
11
12
var authorName="山边小溪";
function doSomething(){
    var blogName="梦想天空";
    function innerSay(){
        alert(blogName);
    }
    innerSay();
}
alert(authorName); //山边小溪
alert(blogName); //脚本错误
doSomething(); //梦想天空
innerSay() //脚本错误

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

1
2
3
4
5
6
7
8
function doSomething(){
    var authorName="山边小溪";
    blogName="梦想天空";
    alert(authorName);
}
doSomething(); //山边小溪
alert(blogName); //梦想天空
alert(authorName); //脚本错误

变量blogName拥有全局作用域，而authorName在函数外部无法访问到。

全局作用域只能访问在全局定义的函数或变量，而不能直接访问局部环境中的任何数据。

（3）所有window对象的属性拥有全局作用域

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

局部作用域

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

函数的局部环境能访问函数作用域中的变量，也能访问其父环境乃至全局环境中的变量。

例如下列代码中的 blogName 和函数 innerSay 都只拥有局部作用域。

1
2
3
4
5
6
7
8
9
function doSomething(){
    var blogName="梦想天空";
    function innerSay(){
        alert(blogName);
    }
    innerSay();
}
alert(blogName); //脚本错误
innerSay(); //脚本错误

作用域链及代码优化


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

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

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

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

1
2
3
4
5
function changeColor(){
    document.getElementById("btnChange").onclick=function(){
        document.getElementById("targetCanvas").style.backgroundColor="red";
    };
}

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

1
2
3
4
5
6
function changeColor(){
    var doc=document;
    doc.getElementById("btnChange").onclick=function(){
        doc.getElementById("targetCanvas").style.backgroundColor="red";
    };
}

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

注意事项及Demo


1、作用域链在声明后就已经创建 （确切的说是编译器解析之后生成）

2、JavaScript 通过遍历作用域链来查找变量

3、在 javascript 中，if 和 for 语句没有块级作用域，即在 if 语句中的变量声明会添加到当前的执行环境中，for 语句创建的变量 i 在循环执行结束后依然存在于循环外部的执行环境中。

特别地，针对第二点：

当使用变量的时候，JavaScript 会做如下的事情：

先在当前函数里（作用域）找这个变量

如果没有则向外层找，如果外层也没，则继续在外层的外层查找。

当全局作用域也找不到的时候，报错 “XXX is not defined”

Demo 00

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function I_Have_A(){
    var a = 'a'; 
}
function I_Have_B(){
    var b = 'b'; 
}
function sayA(){
    console.log(a); 
}
sayA(); 
// => 
// 报错 找不到 a

调用 sayA 的时候（在全局环境调用），其作用域链是 [sayA, GlobalEnv] 因此查找不倒 a ，所以会报错。

Demo 01

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function I_Have_A(){
    var a = 'a'; 
    function sayA(){
        console.log(a); 
    }
    sayA(); 
}
function I_Have_B(){
    var b = 'b'; 
}
I_Have_A(); 
// => 
// 打印输出 'a'

此时调用 sayA 的时候（在 I_Have_A 内），其作用域链是 [sayA, I_Have_A, GlobalEnv] 因此可以查找到 a 输出无误。

Demo 02

1
2
3
4
5
6
7
8
9
10
11
12
13
function I_Have_A(){
    var a = 'a'; 
    function sayA(){
        console.log(a); 
    }
    return sayA; 
}
I_Have_A()(); 
// I_Have_A()() ===> sayA()
// 最后得到 'a'

调用 sayA 的时候（在全局环境调用），其作用域链仍然是 [sayA, I_Have_A, GlobalEnv] 因此可以得到结果。

Demo 00 尝试从全局访问内部，失败。
Demo 01 尝试从内部访问内部，成功。
Demo 02 尝试从全局访问内部，成功。

这种将作用域传播另一个地方的特性被成为 闭包 ，上述实现了一个闭包，使得全局可以访问内部变量 a

更一般的，只要编程语言具备以下两种特性，就一定可以会有闭包特性：

函数是一等公民

采用词法作用域

针对第一点：任何函数都能像其他一等公民那样普通的被函数返回、普通的作为函数的参数传递，函数是值。
（其他的一等公民比如数字、数组、字符串等）

特别的，也不一定一定是要词法作用域才能有闭包，其他类型作用域比如动态作用域也可以有闭包，不过比较复杂。

Demo 03 异步操作中的闭包（一）

1
2
3
4
5
6
7
8
9
function say0to4(){
    var i = 0; 
    for (;i < 5; i++){
        setTimeout(() => {
            console.log(i); 
        }, i * 100); 
    }
}
say0to4();

调用后会得到 5 个 5，结果不符合预期。

Demo 04 异步操作中的闭包（二）

在此利用闭包去解决第上一个例子的 bug

分析一下，问题出现在 i，和 setTimeout 的异步，当回调函数执行的时候， for 已经跑完，意味着：

在执行 setTimeOut 之前，i 已经变成了 5 ，setTimeout 了 5 次函数，这些函数的作用域链一样，查找 i 的时候得到的结果也一样

解决如下：

1
2
3
4
5
6
7
8
9
10
11
function say0to4(){
    var i = 0; 
    for (;i < 5; i++){
        (function f(the_i){
            setTimeout(() => {
                console.log(the_i); 
            }, the_i * 100); 
        })(i)
    }
}
say0to4();

上述结果正确。 过程如下：

调用了 5 次 f，每次的 f 的作用域链是一致的。
但是 f 调用的时候，会传递参数 i，并作为函数的参数存在 f 作用域下，每次调用的时候给进去的 i 不同，因此作用域内容不同。
setTimeout 后查找 i 的时候很自然的就找到了 5 次调用的时候给进去的 5 个不同的值。 结果正确