闭包
JavaScript中必须提到的功能最强大的抽象概念之一:闭包。它究竟是做什么的呢?
1 function makeAdder(a) { 2 return function(b) { 3 return a + b; 4 } 5 } 6 var x = makeAdder(5); 7 var y = makeAdder(20); 8 x(6); // 11 9 y(7); // 27
makeAdder这个名字本身应该能说明函数是用来做什么的:他创建了一个新的adder函数,这个函数自身带有一个参数,它被调用的时候这个参数会被加载在外层函数传进来的参数上。
这里发生的事情和前面介绍过的内嵌函数十分相似:一个函数被定义在了另外一个函数的内部,内部函数可以访问外部函数的变量。唯一的不同是,外部函数被返回了,那么常识告诉我们局部变量“应该”不再存在。但是它们却仍然存在——否则 adder
函数将不能工作。也就是说,这里存在makeAdder
的局部变量的两个不同的“副本”——一个是 a
等于5,另一个是 a
等于20。运行结果就是一个是11一个是27。
下面来说说到底发生了什么。当JavaScript执行一个函数时,都会创建一个作用域对象(scope object),用来保存在这个函数中创建的局部变量。他和被传入函数的变量一起被初始化。这与那些保存的所有全部变量和函数的全局变量(global object)类似,但仍有很重要的区别,第一,每次函数被执行的时候,就会创建一个新的,特定的作用域对象;第二,与全局对象(在浏览器里面是当做window对象来访问的)不同的是,你不能从JavaScript代码中直接访问作用与对象,也没有可以遍历当前作用与对象里面属性的方法。
所以当调用 makeAdder
时,解释器创建了一个作用域对象,它带有一个属性:a
,这个属性被当作参数传入 makeAdder
函数。然后 makeAdder
返回一个新创建的函数。通常 JavaScript 的垃圾回收器会在这时回收 makeAdder
创建的作用域对象,但是返回的函数却保留一个指向那个作用域对象的引用。结果是这个作用域对象不会被垃圾回收器回收,直到指向 makeAdder
返回的那个函数对象的引用计数为零。
作用域对象组成了一个名为作用域链(scope chain)的链。它类似于原形(prototype)链一样,被 JavaScript 的对象系统使用。
一个闭包就是一个函数和被创建的函数中的作用域对象的组合。
闭包允许你保存状态——所以它们通常可以代替对象来使用。
内存泄漏
使用闭包的一个坏处是,在 IE 浏览器中它会很容易导致内存泄露。JavaScript是一种具有垃圾回收机制的语言——对象在创建时分配内存,然后当值想这个对象的引用计数为零时,浏览器会回收内存。宿主环境提供的对象都是按照这种方法被处理的。
浏览器主机需要处理大量的对象来描绘一个正在被展现的HTML页面——DOM对象。浏览器负责管理他们的内存分配和回收。
IE浏览器有自己一套垃圾回收机制,这套机制与JavaScript提供的垃圾回收机制交互时,可能发生内存泄漏。
在IE中,每当在一个JavaScript对象和一个本地对象之间形成循环引用时就会发生内存泄漏。如下所示:
1 function leakMemory() { 2 var el = document.getElementById(‘el‘); 3 var o = { ‘el‘: el }; 4 el.o = o; 5 }
这段代码的循环引用会导致内存泄露:IE 不会释放被 el
和 o
使用的内存,直到浏览器被彻底关闭并重启后。
这个例子往往无法引起人们的重视:一般只会在长时间运行的应用程序中,或者因为巨大的数据量和循环中导致内存泄露发生时,内存泄露才会引起注意。
不过一般也很少发生如此明显的内存泄露现象——通常泄露的数据结构有多层的引用(references),往往掩盖了循环引用的情况。
闭包很容易发生无意识的内存泄露。如下所示:
1 function addHandler() { 2 var el = document.getElementById(‘el‘); 3 el.onclick = function() { 4 el.style.backgroundColor = ‘red‘; 5 } 6 }
这段代码创建了一个元素,当它被点击的时候变红,但同时它也会发生内存泄露。为什么?因为对el
的引用不小心被放在一个匿名内部函数中。这就在 JavaScript 对象(这个内部函数)和本地对象之间(el
)创建了一个循环引用。
这个问题有很多种解决方法,最简单的一种是不要使用 el
变量:
1 function addHandler(){ 2 document.getElementById(‘el‘).onclick = function(){ 3 this.style.backgroundColor = ‘red‘; 4 }; 5 }
有趣的是,有一种窍门解决因闭包而引入的循环引用,是添加另外一个闭包:
1 function addHandler() { 2 var clickHandler = function() { 3 this.style.backgroundColor = ‘red‘; 4 }; 5 (function() { 6 var el = document.getElementById(‘el‘); 7 el.onclick = clickHandler; 8 })(); 9 }
内部函数被直接执行,并在 clickHandler
创建的闭包中隐藏了它的内容。
另外一种避免闭包的好方法是在 window.onunload
事件发生期间破坏循环引用。很多事件库都能完成这项工作。注意这样做将使 Firefox 中的 bfcache 无法工作。所以除非有其他必要的原因,最好不要在 Firefox 中注册一个unload
的监听器。