闭包是一个能够访问其他函数作用域的函数。
这句话看似拗口,如果读过先前的几篇博客,那理解起来应该不难。下面来解析一下这句话:
换句话说,如果一个函数能访问其他函数作用域中的变量,那么这个函数就叫做“闭包”。
只要在一个函数中再定义一个函数,这个内部函数就是一个闭包。
注意:只要满足一个函数在另一个函数的内部的条件,这个内部函数就是闭包,不管这个内部函数是以怎样的形式存在于外层函数中的。下面举几个例子:
function father () {
function son () {
}
}
function father () {
var object = new Object();
object.son = function () {
}
}
function father () {
var object = {
son : function(){}
};
}
以上三种形式定义的内部函数都是闭包。
前面闭包的定义中说“闭包能访问其他函数作用域中的变量”。“其他函数”指的是闭包所在的外层函数。 也就是说,闭包能访问它所在外层函数全部变量,即使外层函数已经执行结束。 闭包的这种特性有助于我们在JavaScript这门非面向对象的语言中实现面向对象的一些特性。这个后面会详细介绍。
闭包的原理涉及到作用域链的内存模型,这里带大家回顾下作用域链,更为详细的内容请看:稳扎稳打JavaScript(一)——作用域链
以下列代码为例:
function father () {
var name = "爸爸";
var company = "Google";
function son () {
var name = "儿子";
var school = "启东中学";
alert(name);
alert(school);
}
return son;
}
这段代码在window作用域中定义了函数father; father中有两个局部变量:name、company; father中定义了一个闭包; 闭包中定义了两个局部变量:name、school。
综上所述,闭包之所以能访问其外层函数作用域中的变量,是因为闭包的作用域链中存在外层函数的变量对象。即使外层函数之行结束,但由于其变量对象仍然被内层函数的作用域引用,因此不会被内存回收,直到闭包执行结束后,外层函数的变量对象才会被回收。
若闭包在外层函数执行结束后执行,那么它只能获取到外层函数中所有变量的最终状态。
function father(){
var array = [];
for (var i=0; i<10; i++) {
array[i] = function(){
return i;
}
}
return array;
}
father函数执行后会返回一个包含闭包的数组,每个闭包都会返回i。 由于这里的闭包调用时,外层函数早就执行结束了,外层函数变量对象中i值已经变成了9,此时不管执行array中的哪个闭包,返回的结果都是9。 但是,如果在闭包外层函数执行过程中立即执行闭包,那么结果就不一样了,请看例2.
function father(){
var array = [];
for (var i=0; i<10; i++) {
array[i] = (function(){
return i;
})();
}
return array;
}
此时的闭包在外层函数执行时就立即执行,在那个时刻,闭包中i的值就是外层函数当前i的值,因此返回的array中存储的将是0-9. 但是,例子1中array存放的明明是闭包,而这里的array存放的却是闭包执行的结果,那么若仍想让array存储闭包,我们还需要稍稍改造,请看例3。
function father(){
var array = [];
for (var i=0; i<10; i++) {
array[i] = (function(){
var curI = i;
return function(){
return curI;
}
})();
}
return array;
}
我们让立即执行的闭包再返回一个闭包,并且将for循环中的i值赋给立即执行函数的局部变量,此时array中存储的将是闭包,并且每个闭包都拥有正确的值。
因为如果一个函数内部有闭包存在,那么函数之行结束后不会释放自己的变量对象,只有当闭包执行结束后才会释放,因此闭包将会占用更大的内存空间,用于存储外层函数的变量兑现。 因此,能避免的情况下就不要使用闭包。
我们知道,JavaScript由ECMAScript、BOM、DOM组成,在某些浏览器中他们使用不同的语言实现,因此他们具有不同的垃圾回收机制。 ECMAScript对象采用标记清除算法回收内存,而某些浏览器的DOM对象采用引用计数算法回收内存。引用计数有个致命的缺点——无法回收循环引用的对象。 举个例子:如果一个DOM对象A中的属性a指向另一个DOM对象B,而B中有属性b指向对象A,那么这两个对象存在循环引用,垃圾回收机制就无法回收他们,这就造成了内存泄漏。 退一步将,只要循环引用的两个对象中存在一个DOM对象,就会导致内存泄漏,请看下面的例子:
function func () {
var dom = document.getElementById("xx");
dom.onclick = function(){
alert(dom.id);
}
}
这段代码获取了一个DOM对象,并且让这个对象的onclick属性指向了一个JS函数对象;而这个函数对象又指向了DOM对象的id属性,从而出现了循环引用,即使func函数执行完成,这个函数中定义的。由于这两个对象中存在一个DOM对象,因此就会出现内存泄漏。
要解决内存泄漏,我们只要破坏两个对象的相互引用即可。 上述代码要为dom添加一个点击事件,因此dom.onclick属性必须要指向一个JS函数对象,因此这个引用不能切断。 而第二个引用是由JS函数对象指向DOM对象的,目的是为了获取dom的id,我们可以通过如下代码切断这个引用:
function func () {
var dom = document.getElementById("xx");
var id = dom.id;
dom.onclick = function(){
alert(id);
}
}