理解和运用JavaScript的闭包机制
伟大的爱因斯坦同志说过:“如果你无法向一个6岁小孩解释清楚某问题,那说明你自己都没整明白”。然而,当我向一个27岁的朋友解释什么是闭包时,却彻底失败了。
这原本是国外某哥们儿在StackOverflow上对JavaScript闭包所提出的问题。不过既然此问题是在StackOverflow提出的,当然也会有很多高手出来解答,其中有些回答确实是经典,如下面这个:
如果在一个外部函数中再定义一个内部函数,即函数嵌套函数,那么内部函数也可以访问外部函数中的变量:
functionfoo(x){
vartmp=3;
functionbar(y){
alert(x+y+(++tmp));
}
bar(10);
}
foo(2);//alert16
foo(2);//alert16
foo(2);//alert16
此段代码可以正确执行,并返回结果:16,因为bar能访问外部函数的变量tmp,同时也能访问外部函数foo的参数x。但以上示例不是闭包!
要实现闭包的话,需要将内部函数作为外部函数的返回值返回,内部函数在返回前,会将所有已访问过的外部函数中的变量在内存中锁定,也就是说,这些变量将常驻bar的内存中,不会被垃圾回收器回收,如下:
functionfoo(x){
vartmp=3;
returnfunction(y){
alert(x+y+(++tmp));
}
}
varbar=foo(2);//bar现在是个闭包了
bar(10);//alert16
bar(10);//alert17
bar(10);//alert18
上述代码中,第一次执行bar时,仍会返回结果:16,因为bar仍然可以访问x及tmp,尽管它已经不直接存在于foo的作用域内。那么既然tmp被锁定在bar的闭包里,那么每次执行bar的时候,tmp都会自增一次,所以第二次和第三次执行bar时,分别返回17和18。
此示例中,x仅仅是个纯粹的数值,当foo被调用时,数值x就会作为参数被拷贝至foo内。
但是JavaScript处理对象的时候,使用的总是引用,如果用一个对象作为参数来调用foo,那么foo中传入的实际上是原始对象的引用,所以这个原始对象也相当于被闭包了,如下:
functionfoo(x){
vartmp=3;
returnfunction(y){
alert(x+y+tmp++);
x.memb=x.memb?x.memb+1:1;
alert(x.memb);
}
}
varage=newNumber(2);
varbar=foo(age);//bar现在是个闭包了
bar(10);//alert151
bar(10);//alert162
bar(10);//alert173
和期望的一样,每次执行bar(10)时,不但tmp自增了,x.memb也自增了,因为函数体内的x和函数体外的age引用的是同一个对象。
viahttp://stackoverflow.com/questions/111102/how-do-javascript-closures-work
补充:通过以上示例,应该能比较清楚的理解闭包了。如果觉得自己理解了,可以试着猜猜下面这段代码的执行结果:
functionfoo(x){
vartmp=3;
returnfunction(y){
alert(x+y+tmp++);
x.memb=x.memb?x.memb+1:1;
alert(x.memb);
}
}
varage=newNumber(2);
varbar1=foo(age);//bar1现在是个闭包了
bar1(10);//alert151
bar1(10);//alert162
bar1(10);//alert173
varbar2=foo(age);//bar2现在也是个闭包了
bar2(10);//alert??
bar2(10);//alert??
bar2(10);//alert??
bar1(10);//alert??
bar1(10);//alert??
bar1(10);//alert??
实际使用的时候,闭包可以创建出非常优雅的设计,允许对funarg上定义的多种计算方式进行定制。如下就是数组排序的例子,它接受一个排序条件函数作为参数:
[1,2,3].sort(function(a,b){
...//排序条件
});
同样的例子还有,数组的map方法是根据函数中定义的条件将原数组映射到一个新的数组中:
[1,2,3].map(function(element){
returnelement*2;
});//[2,4,6]
使用函数式参数,可以很方便的实现一个搜索方法,并且可以支持无限制的搜索条件:
someCollection.find(function(element){
returnelement.someProperty=='searchCondition';
});
还有应用函数,比如常见的forEach方法,将函数应用到每个数组元素:
[1,2,3].forEach(function(element){
if(element%2!=0){
alert(element);
}
});//1,3
顺便提下,函数对象的apply和call方法,在函数式编程中也可以用作应用函数。这里,我们将它们看作是应用函数——应用到参数中的函数(在apply中是参数列表,在call中是独立的参数):
(function(){
alert([].join.call(arguments,';'));//1;2;3
}).apply(this,[1,2,3]);
闭包还有另外一个非常重要的应用——延迟调用:
vara=10;
setTimeout(function(){
alert(a);//10,afteronesecond
},1000);
还有回调函数:
//...
varx=10;
//onlyforexample
xmlHttpRequestObject.onreadystatechange=function(){
//当数据就绪的时候,才会调用;
//这里,不论是在哪个上下文中创建
//此时变量“x”的值已经存在了
alert(x);//10
};
//...
还可以创建封装的作用域来隐藏辅助对象:
varfoo={};
//初始化
(function(object){
varx=10;
object.getX=function_getX(){
returnx;
};
})(foo);
alert(foo.getX());//获得闭包"x"–10