摘要：簡(jiǎn)要介紹閉包可謂是中的一大特色了，即使你對(duì)閉包沒(méi)概念，你可能已經(jīng)在不知不覺(jué)中使用到了閉包。這就是閉包的獨(dú)特之處。當(dāng)頁(yè)面中存在過(guò)多的閉包，或者閉包的嵌套很多很深時(shí)，會(huì)導(dǎo)致內(nèi)存占用過(guò)多。因此，在這里建議慎用閉包。

閉包可謂是js中的一大特色了，即使你對(duì)閉包沒(méi)概念，你可能已經(jīng)在不知不覺(jué)中使用到了閉包。閉包是什么，閉包就是一個(gè)函數(shù)可以訪問(wèn)到另一個(gè)函數(shù)的變量。這就是閉包，解釋起來(lái)就這么一句話，不明白？我們來(lái)看一個(gè)簡(jiǎn)單的例子：

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

這就其實(shí)已經(jīng)是閉包了，setTimeout中的function是一個(gè)匿名函數(shù)，這個(gè)匿名函數(shù)里的name是geName()作用域中的變量，匿名函數(shù)里只有一個(gè)輸出語(yǔ)句：console.log();

還有一個(gè)很經(jīng)典的例子也可以幫助我們理解什么是閉包：

function create(){
    var i=0;
    // 返回一個(gè)函數(shù)，暫且稱之為函數(shù)A
    return function(){
        i++;
        console.log(i);
    }
}
var c = create(); // c是一個(gè)函數(shù)
c(); // 函數(shù)執(zhí)行
c(); // 再次執(zhí)行
c(); // 第三次執(zhí)行

在上面的例子中，create()返回的是一個(gè)函數(shù)，我們暫且稱之為函數(shù)A吧。在函數(shù)A中，有兩條語(yǔ)句，一條是變量i自增（i++），一條是輸出語(yǔ)句（console.log）。第一次執(zhí)行執(zhí)行c()時(shí)會(huì)產(chǎn)生什么樣的結(jié)果？嗯，輸出自增后的變量i，也就是輸出1；那么第二次執(zhí)行c()呢，對(duì)，會(huì)輸出2；第三次執(zhí)行c()時(shí)會(huì)輸出3，依次累加。這個(gè)create()函數(shù)依然滿足了我們?cè)趧傞_(kāi)始時(shí)的定義，函數(shù)A使用到了另一個(gè)函數(shù)create()中的變量i。

可是為什么會(huì)產(chǎn)生這樣的輸出呢，為什么i就能一直自增呢，create函數(shù)已經(jīng)執(zhí)行完并返回結(jié)果了呀，可是為什么還能接著使用i呢，而且i還能自增。這里就涉及到了三個(gè)比較重要的概念，講解完這三個(gè)概念，我們對(duì)閉包就可以有一個(gè)比較好的理解了。

執(zhí)行環(huán)境是JavaScript中一個(gè)重要的概念，它決定了變量或函數(shù)是否有權(quán)訪問(wèn)其他的數(shù)據(jù)，決定了它們各自的行為。每個(gè)執(zhí)行環(huán)境都有一個(gè)與之對(duì)應(yīng)的變量對(duì)象，執(zhí)行環(huán)境中定義的所有變量和函數(shù)都保存在這個(gè)對(duì)象中。雖然我們的代碼無(wú)法訪問(wèn)這個(gè)對(duì)象，但是解析器在處理數(shù)據(jù)時(shí)會(huì)在后臺(tái)使用它。

我們用一個(gè)比較簡(jiǎn)單的比喻來(lái)形容這兩個(gè)概念。執(zhí)行環(huán)境就是一個(gè)人，變量對(duì)象就是這個(gè)人的身份證號(hào)，每個(gè)人都有其對(duì)應(yīng)的身份證號(hào)。他這個(gè)人決定了他身上的很多屬性和方法（動(dòng)作），而且這個(gè)人的屬性和方法都在他的身份證號(hào)上，當(dāng)這個(gè)人消亡的時(shí)候，身份證號(hào)也就隨之就注銷(xiāo)了。

全局執(zhí)行環(huán)境是最外層的一個(gè)執(zhí)行環(huán)境。在web瀏覽器中，全局執(zhí)行環(huán)境被認(rèn)為是window對(duì)象，因?yàn)樗械娜肿兞亢腿趾瘮?shù)都是作為window對(duì)象的屬性和方法創(chuàng)建的。某個(gè)執(zhí)行環(huán)境中的所有代碼執(zhí)行完畢后，該環(huán)境被銷(xiāo)毀，保存在其中的所有變量和函數(shù)定義也隨之銷(xiāo)毀（全局執(zhí)行環(huán)境直到應(yīng)用程序退出——例如關(guān)閉網(wǎng)頁(yè)或者瀏覽器——時(shí)才會(huì)被銷(xiāo)毀），被垃圾回收機(jī)制回收。

每個(gè)函數(shù)都有自己的執(zhí)行環(huán)境。當(dāng)執(zhí)行流進(jìn)入一個(gè)函數(shù)時(shí)，函數(shù)的環(huán)境就會(huì)被推入到一個(gè)環(huán)境棧中。而在函數(shù)執(zhí)行后，棧將其環(huán)境彈出，把控制權(quán)返回給之前的執(zhí)行環(huán)境。

作用域鏈?zhǔn)钱?dāng)代碼在一個(gè)環(huán)境中執(zhí)行時(shí)創(chuàng)建的，作用域鏈的用途就是要保證執(zhí)行環(huán)境中能有效有序的訪問(wèn)所有變量和函數(shù)。作用域鏈的最前端始終都是當(dāng)前執(zhí)行的代碼所在環(huán)境的變量對(duì)象，下一個(gè)變量對(duì)象是來(lái)自其父親環(huán)境，再下一個(gè)變量對(duì)象是其父親的父親環(huán)境，直到全局執(zhí)行環(huán)境。

標(biāo)識(shí)符解析是沿著作用域鏈一級(jí)一級(jí)地搜索標(biāo)識(shí)符的過(guò)程。搜索過(guò)程始終從作用域鏈的前端開(kāi)始，然后逐級(jí)地向后回溯，直到找到標(biāo)識(shí)符為止（如果找不到標(biāo)識(shí)符，通常會(huì)導(dǎo)致錯(cuò)誤發(fā)生）。其實(shí)，通俗的理解就是：在本作用域內(nèi)找不到變量或者函數(shù)，則在其父親的作用域內(nèi)尋找，再找不到則到父親的父親作用域內(nèi)尋找，直到在全局的作用域內(nèi)尋找！

在js中有兩種垃圾收集的方式：標(biāo)記清除和引用計(jì)數(shù)。

標(biāo)記清除：垃圾收集器在運(yùn)行時(shí)會(huì)給存儲(chǔ)在內(nèi)存中的所有變量都加上標(biāo)記（具體的標(biāo)記方式暫時(shí)就不清楚了），待變量已不被使用或者引用，去掉該標(biāo)記或添加另一種標(biāo)記。最后，垃圾收集器完成內(nèi)存清除工作，銷(xiāo)毀那些已無(wú)法訪問(wèn)到的這些變量并回收他們所占用的空間。

引用計(jì)數(shù)：一般來(lái)說(shuō)，引用計(jì)數(shù)的含義是跟蹤記錄每個(gè)值被引用的次數(shù)。當(dāng)聲明一個(gè)變量并將一個(gè)引用類(lèi)型值賦給該變量時(shí)，則這個(gè)值的引用次數(shù)便是1，如果同一個(gè)值又被賦給另一個(gè)變量，則該值的引用次數(shù)加1，相反，如果包含對(duì)這個(gè)值引用的變量又取得了另一個(gè)值，則這個(gè)值的引用次數(shù)減1。當(dāng)這個(gè)值的引用次數(shù)為0時(shí)，說(shuō)明沒(méi)有辦法訪問(wèn)到它了，因而可以將其占用的內(nèi)存空間回收。

除了一些極老版本的IE，目前市面上的JS引擎基本采用標(biāo)記清除來(lái)除了垃圾回收。但是需要注意的是IE中的DOM由于機(jī)制問(wèn)題，是采用了引用計(jì)數(shù)的方式，所以會(huì)有循環(huán)引用的問(wèn)題，造成內(nèi)存泄露。

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

這樣就造成了循環(huán)引用的問(wèn)題，導(dǎo)致垃圾回收機(jī)制回收不了ele和obj。不過(guò)，可以在不使用ele和obj時(shí)，對(duì)這兩個(gè)變量進(jìn)行 null 賦值，然后垃圾回收機(jī)制就會(huì)回收它們了。

在第2部分講解了三個(gè)重要的概念，這三個(gè)概念有助于我們更好的理解閉包。

我們?cè)俅文贸錾厦娴倪@個(gè)例子：

function create(){
    var i=0;
    // 返回一個(gè)函數(shù)，暫且稱之為函數(shù)A
    return function(){
        i++;
        console.log(i);
    }
}
var c = create(); // c是一個(gè)函數(shù)，即函數(shù)A
c(); // 函數(shù)執(zhí)行
c(); // 再次執(zhí)行
c(); // 第三次執(zhí)行

從上面的“每個(gè)函數(shù)都有自己的執(zhí)行環(huán)境”可以知道：create()函數(shù)是一個(gè)執(zhí)行環(huán)境，函數(shù)A也是一個(gè)執(zhí)行環(huán)境，且函數(shù)A的執(zhí)行環(huán)境在create()的里面。這樣就形成了一個(gè)作用域鏈：window->create->A。當(dāng)執(zhí)行c()時(shí)，函數(shù)A就會(huì)首先在當(dāng)前執(zhí)行環(huán)境中尋找變量i，可是沒(méi)有找到，那么只能順著作用域鏈向后找；OK，在create()的執(zhí)行環(huán)境中找到了，那么就可以使用了變量i了。

可是我們還有一個(gè)疑問(wèn)，按照上面的說(shuō)法，函數(shù)create()執(zhí)行完畢后，這個(gè)函數(shù)與里面的變量和方法應(yīng)該被銷(xiāo)毀了呀，可是為什么函數(shù)c()多次執(zhí)行時(shí)依然能夠輸出變量i呢。這就是閉包的獨(dú)特之處。

函數(shù)create()執(zhí)行完畢后，雖然它的作用域鏈會(huì)被銷(xiāo)毀，即不再存在window->create這個(gè)鏈?zhǔn)疥P(guān)系，但是函數(shù)A()[c()]的作用域鏈還依然引用著create()的變量對(duì)象，還存在著window->create->A的鏈?zhǔn)疥P(guān)系，導(dǎo)致垃圾回收機(jī)制不能回收create()的變量對(duì)象，create()的變量對(duì)象仍然停留在內(nèi)存中，直到函數(shù)A()[c()]被銷(xiāo)毀后，create()的變量對(duì)象才會(huì)被銷(xiāo)毀。

因此，雖然create()已經(jīng)執(zhí)行完畢了，但是create()的變量對(duì)象并沒(méi)有被回收，還停留在內(nèi)存中，依然可以使用。

從上面的講解中我們可以看到，閉包會(huì)攜帶包含它的函數(shù)的作用域，因此會(huì)比其他函數(shù)占用更多的內(nèi)存。當(dāng)頁(yè)面中存在過(guò)多的閉包，或者閉包的嵌套很多很深時(shí)，會(huì)導(dǎo)致內(nèi)存占用過(guò)多。因此，在這里建議：慎用閉包。

有很多新手為DOM元素綁定事件時(shí)，通常會(huì)這么寫(xiě)：

function bindClick(){
    var li = document.getElementsByTagName("li"); // 假設(shè)一共有5個(gè)li標(biāo)簽
    for(var i=0; i

他的本意是想為每個(gè)li標(biāo)簽綁定一個(gè)多帶帶的事件，點(diǎn)擊第幾個(gè)li標(biāo)簽，就能輸出幾。可是，最后的結(jié)果卻是，點(diǎn)擊哪個(gè)li標(biāo)簽輸出的都是5，這是為什么呢？

其實(shí)這位程序員寫(xiě)的bindClick()已經(jīng)構(gòu)成了一個(gè)閉包，下面的這個(gè)函數(shù)有他的作用域，而變量i本不屬于這個(gè)函數(shù)的作用域，而是屬于bindClick()中的：

// 匿名函數(shù)
function(){
    console.log("click the "+i+" li tag");
}


因此，這就構(gòu)成了一個(gè)含有閉包的作用域鏈：window->bindClick->匿名函數(shù)?？墒沁@跟輸出的i有關(guān)系么？有。作用域鏈中的每個(gè)變量對(duì)象保存的是對(duì)變量和方法的引用，而不是保存這個(gè)變量的某一個(gè)值。當(dāng)執(zhí)行到匿名函數(shù)時(shí)，bindClick()其實(shí)已經(jīng)執(zhí)行完畢了，變量i的值就是5，此時(shí)每個(gè)匿名函數(shù)都引用著同一個(gè)變量i。

不過(guò)我們稍微修改一下，以滿足我們的預(yù)期：

/* 
    // 錯(cuò)誤，onclick綁定的是立即執(zhí)行函數(shù)的返回值，
    // 而此立即執(zhí)行并沒(méi)有返回值，也就是onclick = undefined
    function bindClick(){
    var li = document.getElementsByTagName("li");
    for(var i=0; i

在這里，我們使用立即執(zhí)行的匿名函數(shù)來(lái)保證傳入的值就是當(dāng)前正在操作的變量i，而不是循環(huán)完成后的值。

5. 閉包的應(yīng)用場(chǎng)景

（1）在內(nèi)存中維持一個(gè)變量。比如前面講的小例子，由于閉包，函數(shù)create()中的變量i會(huì)一直存在于內(nèi)存中，因此每次執(zhí)行c()，都會(huì)給變量i加1.

（2）保護(hù)函數(shù)內(nèi)的變量安全。還是那個(gè)小例子，函數(shù)create()中的變量c只有內(nèi)部的函數(shù)才能訪問(wèn)，而無(wú)法通過(guò)其他途徑訪問(wèn)到，因此保護(hù)了變量c的安全。

（3）實(shí)現(xiàn)面向?qū)ο笾械膶?duì)象。javascript并沒(méi)有提供類(lèi)這樣的機(jī)制，但是我們可以通過(guò)閉包來(lái)模擬出類(lèi)的機(jī)制，不同的對(duì)象實(shí)例擁有獨(dú)立的成員和狀態(tài)。

這里我們看一個(gè)例子：

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


這就是一個(gè)用閉包實(shí)現(xiàn)的簡(jiǎn)單的類(lèi)，里面的name屬性是私有的，外部無(wú)法進(jìn)行訪問(wèn)，只能通過(guò)setName和getName進(jìn)行訪問(wèn)。

當(dāng)然，閉包還存在另外一種形式：

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



本人個(gè)人博客：http://www.xiabingbao.com