首页 > 代码库 > JavaScript的闭包和内存泄漏问题

JavaScript的闭包和内存泄漏问题

闭包

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); // 119 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 的监听器。

JavaScript的闭包和内存泄漏问题