JavaScript的闭包和内存泄漏问题

Posted 2020-08-12

闭包

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 的监听器。