什么是闭包
《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(上卷)》