什么是闭包
《JavaScript高级程序设计第三版》：闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的常见方式，就是在一个函数内部创建另一个函数。
《你不知道的JavaScript（上卷）》：当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。
在分析闭包之前，我们首先看段代码:
function foo() {
var a = 2;
function bar() {
console.log( a ); // 2
}
bar();
}
foo();
按照第一种定义，这个就是闭包了，因为在一个函数foo内部创建另一个函数bar()。其实，我们仔细看下定义就会发现：在一个函数内部创建另一个函数是创建闭包的常见方式，并不是闭包的定义。确切的说，上述代码中bar() 对a 的引用的方法是词法作用域的查找规则，而这些规则只是闭包的一部分。
var a = 2;
(function IIFE() {
console.log( a );//2
})();
这个是闭包吗？按照前面的定义，并不是，因为IIFE这个函数并不是在它本身的词法作用域以外执行的，a 是通过普通的词法作用域查找而非闭包被发现的。
那到底什么是闭包呢，我们继续往下看：
function foo() {
var a = 2;
function bar() {
console.log( a );
}
return bar;
}
var baz = foo();
baz(); // 2
没错，在上面例子中，bar()在自己定义的词法作用域以外的地方被执行，这就是闭包。
一般情况下，由于有垃圾回收机制，在foo() 执行后，foo() 的整个内部作用域都被销毁。而闭包的“神奇”之处在于可以阻止这件事情的发生。事实上，bar()在使用foo() 的内部作用域，所以这个内部作用域依然存在，拜bar() 所声明的位置所赐，它拥有涵盖foo() 内部作用域的闭包，使得该作用域能够一直存活，使得bar() 在之后任何时间进行引用。bar() 对foo()的作用域的引用，就叫作闭包。
function foo() {
var a = 2;
function baz() {
console.log( a ); // 2
}
bar( baz );
}
function bar(fn) {
fn();
}
var fn;
function foo() {
var a = 2;
function baz() {
console.log( a );
}
fn = baz; // 将baz 分配给全局变量
}
function bar() {
fn(); // 这就是闭包！
}
foo();
bar(); // 2
上述两段代码的区别在于，函数值的传递方式不同，但其运行结果一样，而且都产生了闭包。因此，无论通过何种手段将内部函数传递到所在的词法作用域以外，它都会持有对原始定义作用域的引用，无论在何处执行这个函数都会使用闭包。
我们再来分析闭包中经典的for循环问题
for(var i=0;i<5;i++){
setTimeout(function timer(){
console.log( i );
},i*1000)
}
如果你认为这段代码的运行结果为分五次输出0，1，2，3，4，每次间隔为1秒，那就错了。正确的结果是，五次输出都为5，那么，这个5 是从哪里来的呢？我们发现这个循环的终止条件是i >=5。条件首次成立时i 的值是5。因此，输出显示的是循环结束时i 的最终值。
在这段代码中我们试图假设循环中的每个迭代在运行时都会给自己“捕获”一个i 的副本。但是根据作用域的工作原理，当某个函数被调用时，会创建一个执行环境（execution context）及相应的作用域链。然后，使用arguments 和其他命名参数的值来初始化函数的活动对象（activation object）。在作用域链中，外部函数的活动对象始终处于第二位，外部函数的外部函数的活动对象处于第三位，……直至为作用域链终点的全局执行环境。
函数执行过程中，为读取和写入变量的值，就需要在作用域链中查找变量，尽管循环中的五个函数是在各个迭代中分别定义的，但是它们都被封闭在一个共享的全局作用域中，因此实际上只有一个i。所以要想搞清楚闭包，首先需要明白作用域链的工作原理。
作用域链
我们看下面这段代码：
function compare(value1, value2){
if (value1 < value2){
return -1;
} else if (value1 > value2){
return 1;
} else {
return 0;
}
}
var result = compare(5, 10);
以上代码先定义了compare()函数，然后又在全局作用域中调用了它。当调用compare()时，会创建一个包含arguments、value1 和value2 的活动对象。全局执行环境的变量对象（包含result和compare）在compare()执行环境的作用域链中则处于第二位。下图展示了包含上述关系的compare()函数执行时的作用域链。
后台的每个执行环境都有一个表示变量的对象——变量对象。全局环境的变量对象始终存在，而像compare()函数这样的局部环境的变量对象，则只在函数执行的过程中存在。在创建compare()函数时，会创建一个预先包含全局变量对象的作用域链，这个作用域链被保存在内部的[[Scope]]属性中。
当调用compare()函数时，会为函数创建一个执行环境，然后通过复制函数的[[Scope]]属性中的对象构建起执行环境的作用域链。此后，又有一个活动对象（在此作为变量对象使用）被创建并被推入执行环境作用域链的前端。对于这个例子中compare()函数的执行环境而言，其作用域链中包含两个变量对象：本地活动对象和全局变量对象。
显然，作用域链本质上是一个指向变量对象的指针列表，它只引用但不实际包含变量对象。
无论什么时候在函数中访问一个变量时，就会从作用域链中搜索具有相应名字的变量。一般来讲，当函数执行完毕后，局部活动对象就会被销毁，内存中仅保存全局作用域（全局执行环境的变量对象）。但是，闭包的情况又有所不同。
function createComparisonFunction(propertyName) {
return function(object1, object2){
var value1 = object1[propertyName];
var value2 = object2[propertyName];
if (value1 < value2){
return -1;
} else if (value1 > value2){
return 1;
} else {
return 0;
}
};
}
在另一个函数内部定义的函数会将包含函数（即外部函数）的活动对象添加到它的作用域链中。因此，在createComparisonFunction()函数内部定义的匿名函数的作用域链中，实际上将会包含外部函数createComparisonFunction()的活动对象。这段代码的作用域链如下所示
在匿名函数从createComparisonFunction()中被返回后，它的作用域链被初始化为包含createComparisonFunction()函数的活动对象和全局变量对象。这样，匿名函数就可以访问在createComparisonFunction()中定义的所有变量。更为重要的是，createComparisonFunction()函数在执行完毕后，其活动对象也不会被销毁，因为匿名函数的作用域链仍然在引用这个活动对象。换句话说，当createComparisonFunction()函数返回后，其执行环境的作用域链会被销毁，但它的活动对象仍然会留在内存中；直到匿名函数被销毁后，createComparisonFunction()的活动对象才会被销毁，例如：
//创建函数
var compareNames = createComparisonFunction("name");
//调用函数
var result = compareNames({ name: "Nicholas" }, { name: "Greg" });
//解除对匿名函数的引用（以便释放内存）
compareNames = null;
首先，创建的比较函数被保存在变量compareNames 中。而通过将compareNames 设置为等于null解除该函数的引用，就等于通知垃圾回收例程将其清除。随着匿名函数的作用域链被销毁，其他作用域（除了全局作用域）也都可以安全地销毁了。
理解了作用域链的销毁机制，我们也就清楚了前面的for循环问题中的闭包问题，由于变量i存在于全局变量对象中，每次调用timer时，都是沿着作用域链去查找i的值，我们知道，延迟函数的回调会在循环结束时才执行。事实上，当定时器运行时即使每个迭代中执行的是setTimeout(.., 0)，所有的回调函数依然是在循环结束后才会被执行，因此每次输出5就不难理解了。
整理自《JavaScript高级程序设计第三版》、《你不知道的JavaScript（上卷）》
网友评论