浅析JavaScript作用域链、执行上下文与闭包

闭包和作用域链是JavaScript中比较重要的概念，这两天翻阅了一些资料，把相关知识点给大家总结了以下。

JavaScript 采用词法作用域（lexical scoping），函数执行依赖的变量作用域是由函数定义的时候决定，而不是函数执行的时候决定。以下面的代码片段举例说明，通常来说（基于栈的实现，如 C 语言） foo 被调用之后函数内的本地变量 scope 会被释放，但是从词法上看 foo 的内嵌匿名函数中 scope 应该指的是 foo 的本地变量 scope ，并且实际上代码的运行结果跟词法上的表达式一致的，f 被调用之后返回的是local scope。函数对象 f 在其主体函数 foo 调用结束之后，依然保持着 foo 函数体作用域变量的引用，这就是所谓的闭包 。

var scope = 'global scope';
function foo() {
var scope = 'local scope';
return function () {
return scope;
}
}
var f = foo();
f(); // 返回 "local scope"

那么闭包到底是如何工作的呢？了解闭包首先需要了解变量作用域和作用域链，另外一个重要的概念是执行上下文环境。

变量作用域

JavaScript 中全局变量拥有全局的作用域，函数体内申明的变量的作用域是整个函数体内，是局部的，当然也包括函数体内定义的嵌套函数。函数体内局部变量的优先级高于全局变量，如果局部变量与全局变量重名，全局变量会被局部变量掩盖；同样嵌套函数内定义的局部变量的优先级高于嵌套函数所在函数的局部变量。这简直是显而易见的，几乎所有人都了解。
接下来谈谈可能大家比较陌生的。

函数声明提升

用一句话来说明函数申明提升，指的是函数体内部申明的变量再整个函数内有效。也就是说，就是在函数体最底部申明的变量，也会被提升到最顶部。举个例子：

var scope = 'global scope';
function foo() {
console.log(scope); // 这里不会打印出 "global scope"，而是 "undefined"
var scope = 'local scope'; 
console.log(scope); // 很显然，打印出 "local scope"
}
foo();

第一个console.log(scope)会打印出undefined而不是global scope，是因为局部变量的申明被提升了，只是还未赋值。

作为属性的变量

在 JavaScript 中，有三种定义全局变量的方式，如下示例代码中的 globalVal1 、globalVal2 和 globalValue3 。一个有趣的现象是，实际上全局变量仅仅只是全局对象 window/global （在浏览器中是 window，在 node.js 中是 global）的属性而已。为了更加符合通常意义的变量定义， JavaScript 把用 var 定义的全局变量，设计成了不可删除的全局对象属性。 通过Object.getOwnPropertyDescriptor(this, 'globalVal1')可以得到，其 configurable 属性为 false 。

var globalVal1 = 1; // 不可删除的全局变量
globalVal2 = 2; // 可删除的全局变量
this.globalValue3 = 3; // 同 globalValue2
delete globalVal1; // => false 变量没有被删除
delete globalVal2; // => true 变量被删除
delete this.globalValue3; //=> true 变量被删除

那么问题来了，函数体内定义的局部变量是不是也作为某个对象的属性呢？答案是肯定的。这个对象是跟函数调用相关的，在 ECMAScript 3中称为“call object”、ECMAScript 5中称为“declaravite environment record”的对象。这个特殊的对象对我们来说是一种不可见的内部实现。

作用域链

从上一节我们知道，函数局部变量可与看做是某个不可见的对象的属性。那么 JavaScript 的词法作用域的实现可以这样描述：每一段 JavaScript 代码（全局或函数）都有一个跟它关联的作用域链，它可以是数组或链表结构；作用域链中的每一个元素定义了一组作用域内的变量；当我们要查找变量 x 的值，那么从作用域链的第一个元素中找这个变量，如果没有找到者找链表中的下一个元素中查找，直到找到或抵达链尾。了解作用域链的概念对理解闭包至关重要。

执行上下文

每段 JavaScript 代码的执行都与执行上下文绑定，运行的代码通过执行上下文获可用的变量、函数、数据等信息。全局的执行上下文是唯一的，与全局代码绑定，每执行一个函数都会创建一个执行上下文与其绑定。JavaScript 通过栈的数据结构维护执行上下文，全局执行上下文位于栈底，当执行一个函数的时候，新创建的函数执行上下文将会压入栈中，执行上下文指针指向栈顶，运行的代码即可获得当前执行的函数绑定的执行上下文。如果函数体执行嵌套的函数，也会创建执行上下文并压入栈，指针指向栈顶，当嵌套函数运行结束后，与它绑定的执行上下文被推出栈，指针重新指向函数绑定的执行上下文。同样，函数执行结束，指针会指向全局执行上下文。

执行上下文可以描述成式一个包含变量对象（对应全局）/活动对象（对应函数）、作用域链和 this 的数据结构。当一个函数执行时，活动对象被创建并绑定到执行上下文。活动对象包括函数体内申明的变量、函数、arguments 等。作用域链在上一节以及提到，是按词法作用域构建的。需要注意的是 this 不属于活动对象，在函数执行的那一刻就以及确定。
执行上下文的创建是有特定的次序和阶段的，不同阶段有不同的状态，具体的细节可以看一下参考资料，在结尾部分会列出。

闭包

了解了作用域链和执行上下文，回过头看篇首的那段代码，基本上就可以解释闭包式如何工作了。函数调用的时候创建的执行上下文以及词法作用域链保持函数调用所需要的信息， f 函数调用之后才可以返回local scope。

需要注意的是，函数内定义的多个函数使用的是同一个作用域链，在使用 for 循环赋值匿名函数对象的场景比较容易引起错误，举例如下：

var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = {
func: function() {
return i;
}
};
}
arr[0].func(); // 返回 10，而不是 0

arr[0].func()返回的是 10 而不是 0，跟感官上的语义有偏差。在 ECMAScript 6 引入 let 之前， 变量作用域范围是在整个函数体内而不是在代码区块之内，所以上面的例子中所有定义的 func 函数引用了同一个作用域链在 for 循环之后， i 的值已经变为 10 。

正确的做法是这样：

var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = {
func: getFunc(i)
};
}
function getFunc(i) {
return function() {
return i;
}
}
arr[0].func(); // 返回 0

以上内容给大家介绍了JavaScript作用域链、执行上下文与闭包的相关知识，希望对大家有所帮助。