1. 扼要引见

闭包可谓是js中的一大特征了，纵然你对闭包没观点，你可以已在不知不觉中运用到了闭包。闭包是什么，闭包就是一个函数可以接见到另一个函数的变量。这就是闭包，诠释起来就这么一句话，不明白？我们来看一个简朴的例子：

function getName(){
    var name='wenzi';
    setTimeout(function(){
        console.log(name);
    }, 500);
}
getName();

这就实在已是闭包了，setTimeout中的function是一个匿名函数，这个匿名函数里的name是geName()作用域中的变量，匿名函数里只要一个输出语句：console.log();

另有一个很典范的例子也可以协助我们明白什么是闭包：

function create(){
    var i=0;
    // 返回一个函数，临时称之为函数A
    return function(){
        i++;
        console.log(i);
    }
}
var c = create(); // c是一个函数
c(); // 函数实行
c(); // 再次实行
c(); // 第三次实行

在上面的例子中，create()返回的是一个函数，我们临时称之为函数A吧。在函数A中，有两条语句，一条是变量i自增（i++），一条是输出语句（console.log）。第一次实行实行c()时会发作什么样的效果？嗯，输出自增后的变量i，也就是输出1；那末第二次实行c()呢，对，会输出2；第三次实行c()时会输出3，顺次累加。这个create()函数依旧满足了我们在刚最先时的定义，函数A运用到了另一个函数create()中的变量i。

然则为何会发作如许的输出呢，为何i便可以一向自增呢，create函数已实行完并返回效果了呀，然则为何还能接着运用i呢，而且i还能自增。这里就触及到了三个比较主要的观点，解说完这三个观点，我们对闭包便可以够有一个比较好的明白了。

2. 三个主要观点

2.1 实行环境与变量对象

实行环境是JavaScript中一个主要的观点，它决议了变量或函数是不是有权接见其他的数据，决议了它们各自的行动。每一个实行环境都有一个与之对应的变量对象，实行环境中定义的一切变量和函数都保留在这个对象中。虽然我们的代码没法接见这个对象，然则剖析器在处置惩罚数据时会在背景运用它。

我们用一个比较简朴的比方来描述这两个观点。实行环境就是一个人，变量对象就是这个人的身份证号，每一个人都有其对应的身份证号。他这个人决议了他身上的许多属性和要领（行动），而且这个人的属性和要领都在他的身份证号上，当这个人灭亡的时刻，身份证号也就随之就注销了。

全局实行环境是最外层的一个实行环境。在web浏览器中，全局实行环境被认为是window对象，因为一切的全局变量和全局函数都是作为window对象的属性和要领建立的。某个实行环境中的一切代码实行终了后，该环境被烧毁，保留在个中的一切变量和函数定义也随之烧毁（全局实行环境直到运用程序退出——比方封闭网页或许浏览器——时才会被烧毁），被渣滓接纳机制接纳。

每一个函数都有本身的实行环境。当实行流进入一个函数时，函数的环境就会被推入到一个环境栈中。而在函数实行后，栈将其环境弹出，把控制权返回给之前的实行环境。

2.2 作用域链

作用域链是当代码在一个环境中实行时建立的，作用域链的用处就是要保证实行环境中能有用有序的接见一切变量和函数。作用域链的最前端一直都是当前实行的代码地点环境的变量对象，下一个变量对象是来自其父亲环境，再下一个变量对象是其父亲的父亲环境，直到全局实行环境。

标识符剖析是沿着作用域链一级一级地搜刮标识符的历程。搜刮历程一直从作用域链的前端最先，然后逐级地向后回溯，直到找到标识符为止（假如找不到标识符，通常会致使毛病发作）。实在，浅显的明白就是：在本作用域内找不到变量或许函数，则在其父亲的作用域内寻觅，再找不到则到父亲的父亲作用域内寻觅，直到在全局的作用域内寻觅！

2.3 渣滓接纳机制

在js中有两种渣滓网络的体式格局：标记消灭和援用计数。

标记消灭：渣滓网络器在运行时会给存储在内存中的一切变量都加上标记（详细的标记体式格局临时就不清晰了），待变量已不被运用或许援用，去掉该标记或增加另一种标记。末了，渣滓网络器完成内存消灭事情，烧毁那些已没法接见到的这些变量并接纳他们所占用的空间。

援用计数：一般来说，援用计数的寄义是跟踪纪录每一个值被援用的次数。当声明一个变量并将一个援用范例值赋给该变量时，则这个值的援用次数就是1，假如同一个值又被赋给另一个变量，则该值的援用次数加1，相反，假如包括对这个值援用的变量又取得了另一个值，则这个值的援用次数减1。当这个值的援用次数为0时，申明没有办法接见到它了，因而可以将其占用的内存空间接纳。

除了一些极老版本的IE，现在市面上的JS引擎基础采纳标记消灭来除了渣滓接纳。然则须要注重的是IE中的DOM因为机制题目，是采纳了援用计数的体式格局，所以会有轮回援用的题目，形成内存泄漏。

var ele = document.getElementById(“element”);
var obj = new Object();
ele.obj = obj; // DOM元素ele的obj援用obj变量
obj.ele = ele; // obj变量的ele援用了DOM元素ele

如许就形成了轮回援用的题目，致使渣滓接纳机制接纳不了ele和obj。不过，可以在不运用ele和obj时，对这两个变量举行 null 赋值，然后渣滓接纳机制就会接纳它们了。

3. 明白闭包

在第2部份解说了三个主要的观点，这三个观点有助于我们更好的明白闭包。

我们再次拿出上面的这个例子：

function create(){
    var i=0;
    // 返回一个函数，临时称之为函数A
    return function(){
        i++;
        console.log(i);
    }
}
var c = create(); // c是一个函数，即函数A
c(); // 函数实行
c(); // 再次实行
c(); // 第三次实行

从上面的“每一个函数都有本身的实行环境”可以晓得：create()函数是一个实行环境，函数A也是一个实行环境，且函数A的实行环境在create()的内里。如许就形成了一个作用域链：window->create->A。当实行c()时，函数A就会首先在当前实行环境中寻觅变量i，然则没有找到，那末只能顺着作用域链向后找；OK，在create()的实行环境中找到了，那末便可以够运用了变量i了。

然则我们另有一个疑问，根据上面的说法，函数create()实行终了后，这个函数与内里的变量和要领应该被烧毁了呀，然则为何函数c()屡次实行时依旧可以输出变量i呢。这就是闭包的奇特的地方。

函数create()实行终了后，虽然它的作用域链会被烧毁，即不再存在window->create这个链式关联，然则函数A()[c()]的作用域链还依旧援用着create()的变量对象，还存在着window->create->A的链式关联，致使渣滓接纳机制不能接纳create()的变量对象，create()的变量对象依然停留在内存中，直到函数A()[c()]被烧毁后，create()的变量对象才会被烧毁。

因而，虽然create()已实行终了了，然则create()的变量对象并没有被接纳，还停留在内存中，依旧可以运用。

从上面的解说中我们可以看到，闭包会照顾包括它的函数的作用域，因而会比其他函数占用更多的内存。当页面中存在过量的闭包，或许闭包的嵌套许多很深时，会致使内存占用过量。因而，在这里发起：慎用闭包。

4. 闭包与变量

有许多新手为DOM元素绑定事宜时，通常会这么写：

function bindClick(){
    var li = document.getElementsByTagName('li'); // 假定一共有5个li标签
    for(var i=0; i<li.length; i++){
        li[i].onClick = function(){
            console.log('click the '+i+' li tag');
        }
    }
}

他的本意是想为每一个li标签绑定一个零丁的事宜，点击第几个li标签，便可以输出几。然则，末了的效果倒是，点击哪一个li标签输出的都是5，这是为何呢？

实在这位程序员写的bindClick()已构成了一个闭包，下面的这个函数有他的作用域，而变量i本不属于这个函数的作用域，而是属于bindClick()中的：

// 匿名函数
function(){
    console.log('click the '+i+' li tag');
}

因而，这就构成了一个含有闭包的作用域链：window->bindClick->匿名函数。然则这跟输出的i有关联么？有。作用域链中的每一个变量对象保留的是对变量和要领的援用，而不是保留这个变量的某一个值。当实行到匿名函数时，bindClick()实在已实行终了了，变量i的值就是5，此时每一个匿名函数都援用着同一个变量i。

不过我们轻微修正一下，以满足我们的预期：

/* 
    // 毛病，onclick绑定的是马上实行函数的返回值，
    // 而此马上实行并没有返回值，也就是onclick = undefined
    function bindClick(){
    var li = document.getElementsByTagName('li');
    for(var i=0; i<li.length; i++){
        li[i].onclick = (function(j){
            console.log('click the '+j+' li tag');
        })(i);
    }
} */
// 改正，onclick 绑定的是 function(){ console.log('click the '+j+' li tag'); }
for(var i=0; i<li.length; i++){
    li[i].onclick = (function(j){
        return function(){
            console.log('click the '+j+' li tag');
        }
    })(i);
}

在这里，我们运用马上实行的匿名函数来保证传入的值就是当前正在操纵的变量i，而不是轮回完成后的值。

5. 闭包的运用场景

（1）在内存中保持一个变量。比方前面讲的小例子，因为闭包，函数create()中的变量i会一向存在于内存中，因而每次实行c()，都会给变量i加1.

（2）庇护函数内的变量平安。照样谁人小例子，函数create()中的变量c只要内部的函数才接见，而没法经由过程其他门路接见到，因而庇护了变量c的平安。

（3）完成面向对象中的对象。javascript并没有供应类如许的机制，然则我们可以经由过程闭包来模拟出类的机制，差别的对象实例具有自力的成员和状况。

这里我们看一个例子：

function Student(){
    var name = 'wenzi';

    return {
        setName : function(na){
            name = na;
        },

        getName : function(){
            return name;
        }
    }
}
var stu = new Student();
console.log(stu.name); // undefined
console.log(stu.getName()); // wenzi

这就是一个用闭包完成的简朴的类，内里的name属性是私有的，外部没法举行接见，只能经由过程setName和getName举行接见。

固然，闭包还存在别的一种情势：

var a = (function(){
    var num = 0;
    return function(){
        return num++;
    }
})()
a(); // 0
a(); // 1
a(); // 2

本人个人博客：http://www.xiabingbao.com