图解闭包与内存泄露的抽象化

几个概念：

js垃圾回收机制：js是一种具有垃圾回收机制的语言，对象在创建时分配内存，当指向该对象的引用计数为0时，浏览器将之前分配的内存。

函数作用域：每个函数执行时都会创建一个作用域对象(scope object)，当函数执行结束时，该作用域对象被回收。作用域对象位存在于函数内部，外部访问不到。

闭包：一个函数和被创建的函数中作用域对象的组合。在函数内部，存在对作用域对象中变量的引用的函数。

闭包的作用：允许存储状态，在函数运行结束后，由于指向该函数作用域对象的引用并不为0，此时函数的状态得以保留而不被回收机制回收内存。

内存泄漏（Memory Leak）：指程序中己动态分配的堆内存由于某种原因程序未释放或无法释放，造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃等严重后果

图解：

从闭包的作用可以得出闭包的一个缺点：内存泄露

这种内存泄露主要是针对IE浏览器的，是由于ie浏览器有着一套自己的垃圾回收机制，这套机制与js提供的垃圾回收机制进行交互时可能出现内存泄露。

因此：闭包很容易发生无意识的内存泄露

循环引用：

function outerFn() {
    var outerVar = {};
    function innerFn() {
        console.log(outerVar);
    }
    outerVar.fn = innerFn;
    return innerFn;
};

//innerFn引用了outerVar对象，outerVar引用了innerFn

上述代码会导致变量在内存中的时间很长，并不会在outerFn结束后被回收。

在旧版本ie中：

当一个循环中同时包含DOM元素和常规JavaScript对象时，IE无法释放任何一个对象——因为这两类对象是由不同的内存管理程序负责管理的。
 

$(document).ready(function() {
    var button = document.getElementById('button-1');
        button.onclick = function() {
            console.log('hello');
        return false;
        };
});

除非关闭浏览器，否则这种循环在IE中永远得不到释放。为此，随着时间的推移，这可能会导致大量内存被无效地占用。

几个内存泄露的解决办法：

 function addHandler(){
   document.getElementById('el').onclick = function(){
        this.style.backgroundColor = 'red';
     };
}

function addHandler() {
    var clickHandler = function() {
        this.style.backgroundColor = 'red';
    };
    (function() {
        var el = document.getElementById('el');
        el.onclick = clickHandler;
    })();
}

//jquery会手动释放自己指定的所有事件处理程序
$(document).ready(function() {
    var $button = $('#button-1');
    $button.click(function(event) {
        event.preventDefault();
        console.log('hello');
    });
});

参考：http://www.cnblogs.com/yakun/p/3932026.html

https://www.cnblogs.com/greatluoluo/p/5930685.html