也议 js闭包和ie内存泄露原理

可以, 但小心使用.

闭包也许是 JS 中最有用的特性了. 有一份比较好的介绍闭包原理的文档.

有一点需要牢记, 闭包保留了一个指向它封闭作用域的指针, 所以, 在给 DOM 元素附加闭包时, 很可能会产生循环引用, 进一步导致内存泄漏. 比如下面的代码:

function foo(element, a, b) {
  element.onclick = function() { /* uses a and b */ };
}

这里, 即使没有使用 element, 闭包也保留了 element, a 和 b 的引用, . 由于 element 也保留了对闭包的引用, 这就产生了循环引用, 这就不能被 GC 回收. 这种情况下, 可将代码重构为:

function foo(element, a, b) {
  element.onclick = bar(a, b);
}

function bar(a, b) {
  return function() { /* uses a and b */ }
}
                                                                                                                       ————— 谷歌js编码规范

这是谷歌js编码规范里的。"闭包",是个绕不开的话题，我查阅了不少资料，各种解释都有，关于为什么会造成内存泄漏，也都介绍的很晦涩，没有把原理讲透，在这里，我就这两个问题详细讲一下。
   首先讲闭包。闭包简而言之，就是一个函数（fa），的内部函数（fb）被fa外的变量引用，就形成了一个闭包；下面给出两种事例：
   1）

function fa() {
        function fb() {
            alert("hello word");
        }
        return fb;
    }
    var myfun = fa();
    myfun();

2）

function fa() {
        var e = document.getElementById("id");
        e.event = function () {
            alert("hello word");
        };
    }

    这两种形式的形成闭包的机制不同，一个通过一个return 返回这个内部函数，从而被包外引用，而另一个则是通过 e，这个docment这个宿主对象的事件而完成外部引用。这两种形式形成的结果就是fa这个函数的的内部函数可以被fa的外部变量所引用，这就形成了闭包。

闭包讲到这里我想大家琢磨一下应该很清楚了，下面我们来分析下这个内存泄漏是怎么形成的。很多资料都说循环引用，IE的计数式的垃圾回收机制，但我相信，这些概念很模糊，到底是怎么们回事，我们下面详细来剖析。

     垃圾回收机制现在很成熟了，但早期的IE版本里（ie4-ie6），对宿主对象（也就是document对象）采用是计数的垃圾回收机制，闭包导致内存泄漏的一个原因就是这个算法的一个缺陷。循环引用会导致没法回收，这个循环引用只限定于有宿主对象参与的循环引用，而js对象之间即使形成循环引用，也不会产生内存泄漏，因为对js对象的回收算法不是计数的方式。

     首先我们明确下内存泄漏的概念：内存里不能被回收也不能被利用的空间即为内存泄漏。为什么不能被回收呢？不符合内存回收的算法；为什么不能被利用呢？在栈上没有指向他的指针。在这里我简单的讲一下堆和栈的关系:

    function fa() {
        var o = new Object();
    }
    fa();

我们看这段代码执行的时候发生了什么

我们看到，栈上只是存了一个指针，指针就是堆上对象的的地址；我们的程序通过这个指针句可以操作堆上的对象。栈上的这个指针是自动管理的，当函数退出后，就销毁了；这样程序就在没办法访问到堆上的这个对象了，而堆上的这个对象这个时候就会被我们的GC自动回收了；如果回收不了，就是内存泄漏了。

  讲到这里大家对内存泄露应该是有所了解了，对于计数回收方式大家查下资料，相信大家根据上面讲的应该可以看明白了，这里不再详细描述。下面我们着重描述下内存泄露的原因，大家先看下面的代码：

  function fa() {
        var a = "hello word";
        return function () {
            alert(a);
        }
    }
    var o = fa();
    o();

这段代码输出hello word，这说明什么？说明在堆上的”hello word‘ 没有被回收，什么原因？因为o这个函数还要引用这个变量。下面我们用计数的GC方式来逐句分析程序的代码

在堆上有两个对象 一个是 hello word 我们叫做O1，匿名函数function（）{alert(a);}我们叫做O2

     当执行

var a = "hello word"; 的时候 O1的计数为1；
当执行

return function () {

            alert(a);
        }

的时候 O2的计数变为1；
当执行完fa这个函数后 栈上的 var a 会被销毁，同是他指向的对象计数减1，这样问题就来了，这样O1的计数变为0了，那不被gc回收了嘛？怎么还会输出"hello word"?
原来在执行

return function () {

            alert(a);
        }
这个函数的时候，为了保持函数对这个变量的引用，在这个匿名函数的作用域链上加了一个对O1的引用，这样 其实 O1的计数在变成了2，在a被销毁后，O1减变成了1而不是0.
那么O1时候被回收呢？当O2被回收的时候。O2什么时候被回收呢？当指向他的var o 从栈上消失的时候。

 好，讲到这里，原理我们讲完了下面我们就看下

function fa() {
        var e = document.getElementById("id");
        e.event = function () {
            alert("hello word");
        };
    }

这段代码为什么会造成内存泄露

var e = document.getElementById("id"); 执行这段代码的时候 右边（O1）的对象计数变为了1

执行这段代码的时候

e.event = function () {

            alert("hello word");
        };

匿名函数（O2）的计数变了1；对象O1的计数变了2；

当函数fa执行完毕时 栈上的指针var e 消失，他指向的对象 O1的计数减1变为了1；这样当函数执行完毕，O1、O2的这两个对象的计数都为1，根据计数的回收算法，就都留在内存里了不能被GC回收了，就造成了内存泄漏。

上面说法不完全正确，实际上执行完fa后O2的计数是2，这个大家可以想一下原因。

其实fa里面的宿主对象只是真正对象一个副本，当执行

e.event 这句指令的时候 做了两件事，一个是副本的对象指向O2 这时O2的计数加1，真正的宿主对象又指向这个O2，这个O2的计数再加1 变为了2
所以 在fa的外面执行 e.event=null 的时候，这时O2计数减1变为了1， 这时候，栈上再没有指向O2的指针了，所以O2的计数再没有减少的机会了。这样O2就永远存在了，O2存在，那么O2的作用域链指向O1的指针就永远存在了，所以O1也就永远存了，这样O1、O2 就再没机会释放了，就造成了内存泄漏。