摘要：權(quán)威指南第版中閉包的定義函數(shù)對(duì)象可以通過(guò)作用域鏈相互關(guān)聯(lián)起來(lái)，函數(shù)體內(nèi)部的變量都可以保存在函數(shù)作用域內(nèi)，這種特性在計(jì)算機(jī)科學(xué)文獻(xiàn)中成為閉包。循環(huán)中的閉包使用閉包時(shí)一種常見(jiàn)的錯(cuò)誤情況是循環(huán)中的閉包，很多初學(xué)者都遇到了這個(gè)問(wèn)題。

閉包簡(jiǎn)介

閉包是JavaScript的重要特性，那么什么是閉包？

《JavaScript高級(jí)程序設(shè)計(jì)(第3版)》中閉包的定義：

閉包就是指有權(quán)訪問(wèn)另一個(gè)函數(shù)中的變量的函數(shù)。

《JavaScript權(quán)威指南(第6版)》中閉包的定義：

函數(shù)對(duì)象可以通過(guò)作用域鏈相互關(guān)聯(lián)起來(lái)，函數(shù)體內(nèi)部的變量都可以保存在函數(shù)作用域內(nèi)，這種特性在計(jì)算機(jī)科學(xué)文獻(xiàn)中成為“閉包”。

簡(jiǎn)單來(lái)說(shuō)，在JavaScript中，函數(shù)是對(duì)象，對(duì)象是屬性的集合，屬性的值也可以是對(duì)象，在函數(shù)內(nèi)定義函數(shù)就成為一種常見(jiàn)的情況，在函數(shù)內(nèi)部聲明函數(shù)innerFunction，在innerFunction內(nèi)部有權(quán)訪問(wèn)外部函數(shù)的變量對(duì)象，這個(gè)函數(shù)就是我們所說(shuō)的閉包。

我們來(lái)看一個(gè)簡(jiǎn)單的例子：

function checkScope(){
    var scope = "local scope";
    function f() { return scope; }
    return f();
}
checkScope();//輸出為“l(fā)ocal scope”

當(dāng)函數(shù)第一次被調(diào)用時(shí)，會(huì)創(chuàng)建一個(gè)執(zhí)行環(huán)境以及相應(yīng)的作用域鏈，作用域鏈的前端，始終都是當(dāng)前執(zhí)行代碼所在環(huán)境的變量對(duì)象，作用域鏈中的下一個(gè)變量對(duì)象來(lái)自包含外部環(huán)境，下一個(gè)變量則來(lái)自下一個(gè)外部環(huán)境，這樣一直延續(xù)到全局執(zhí)行環(huán)境。

在上邊的例子中，訪問(wèn)scope時(shí)，內(nèi)部的f()函數(shù)可以訪問(wèn)f()外部的變量scope，因?yàn)樗谧饔糜蜴溨幸患?jí)一級(jí)往上找的時(shí)候可以找到scope變量。

閉包的作用

一、 模擬私有變量。在函數(shù)內(nèi)創(chuàng)建一個(gè)閉包，閉包就可以通過(guò)自己的作用域鏈訪問(wèn)函數(shù)內(nèi)部的變量，可以創(chuàng)建用于訪問(wèn)私有變量的方法。訪問(wèn)私有變量和私有函數(shù)的方法被稱為特權(quán)方法。

function MyObject(){
    var privateVariable = 10;
    function privateFunction() {
        return false;
    }
    //特權(quán)方法
    this.publicFunction = function() {
        privateVariable++;
        return privateFunction();
    };
}

二、 模仿塊級(jí)作用域。 JavaScript中沒(méi)有塊級(jí)作用域的概念，這意味著在塊語(yǔ)句中定義的變量，實(shí)際上是包含在函數(shù)中的。如果臨時(shí)需要一些變量，使用私有作用域。

function block() {
    var a = 1;
    var b = 2;
    (function () {
        var a = 3;//覆蓋了父作用域中的變量a
        var c = 4;
        //訪問(wèn)到了當(dāng)前作用域中的變量
        console.log(a);//3
        //訪問(wèn)了父作用域中的變量
        console.log(b);//2
        //訪問(wèn)當(dāng)前作用域中的變量
        console.log(c);//4
    })()
    //訪問(wèn)塊級(jí)作用域中的變量
    console.log(c);//c is not defined
}

這種技術(shù)經(jīng)常在全局作用域中被用在函數(shù)外部，從而限制向全局作用域中添加過(guò)多的變量和函數(shù)。

循環(huán)中的閉包

使用閉包時(shí)一種常見(jiàn)的錯(cuò)誤情況是循環(huán)中的閉包，很多初學(xué)者都遇到了這個(gè)問(wèn)題。很常見(jiàn)的一種情況就是給頁(yè)面中的多個(gè)按鈕綁定點(diǎn)擊事件，JavaScript代碼如下所示：

window.onload = function(){
    var inputs = document.getElementsByTagName("input");
    for(var i = 0; i < inputs.length; i++){
        inputs[i].onclick = function(){
            console.log(i);//希望輸出0,1,2,3,4...
        }
    }
}

頁(yè)面中有5個(gè)按鈕，根據(jù)上邊的代碼，我們需要的是依次點(diǎn)擊按鈕時(shí)，控制臺(tái)分別打印出0，1，2，3，4，而實(shí)際上，控制臺(tái)打印出來(lái)的，如下圖所示：

這是為什么呢，當(dāng)for循環(huán)執(zhí)行完之后，i已經(jīng)變成了按鈕的個(gè)數(shù)5了，而所有點(diǎn)擊函數(shù)綁定的都是同一個(gè)i，點(diǎn)擊按鈕時(shí)，打印出來(lái)的i也都變成了5了。

這一部分理解也可以參考http://www.cnblogs.com/qieguo...。

那么我們?yōu)榱说玫较胍慕Y(jié)果，需要在每次循環(huán)中創(chuàng)建變量i的拷貝，下面提供三種方法。

第一、使用匿名包裝器

window.onload = function () {
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        (function (e) {
            inputs[i].onclick = function () {
                console.log(e);
            }
        })(i);

    }
}

依次點(diǎn)擊按鈕，控制臺(tái)輸出如下：

第二、從匿名包裝器中返回一個(gè)函數(shù)：

window.onload = function () {
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onclick = function (num) {
            return function () {
                console.log(num);
            };
        } (i);
    }
}

首先，定義了匿名函數(shù)，并將立即執(zhí)行該匿名函數(shù)的結(jié)果賦值給數(shù)組，匿名函數(shù)有一個(gè)參數(shù)num，在調(diào)用每個(gè)函數(shù)時(shí)，我們傳入了變量i，函數(shù)按值傳遞，就將變量i的當(dāng)前值復(fù)制給參數(shù)num。而在這個(gè)匿名函數(shù)內(nèi)部，又創(chuàng)建并返回了一個(gè)訪問(wèn)num的閉包，這樣一來(lái)，每個(gè)按鈕點(diǎn)擊函數(shù)都有自己num變量的一個(gè)副本，因此可以輸出各自不同的數(shù)值了。

第三、在循環(huán)中使用let

window.onload = function () {
    var inputs = document.getElementsByTagName("input");
    for (let i = 0; i < inputs.length; i++) {
        inputs[i].onclick = function () {
            console.log(i);
        };
    }
}

let是ES6新增的命令，用法類似于var，但是所聲明的變量只能在let命令所在代碼塊內(nèi)有效。上述代碼中，變量i是let聲明的，當(dāng)前的i只在本輪循環(huán)有效。所以每一次循環(huán)的i其實(shí)都是一個(gè)新的變量。關(guān)于let的用法可參考《ECMAScript 6 入門》中第二章。

內(nèi)存泄漏

產(chǎn)生內(nèi)存泄漏的原因是IE9之前的版本對(duì)JScript對(duì)象和COM對(duì)象使用不同的垃圾收集例程，因此閉包在IE的這些版本中會(huì)導(dǎo)致一些問(wèn)題。(JavaScript垃圾收集機(jī)制可參考《JavaScript高級(jí)程序設(shè)計(jì)(第3版)》4.3) 例如：

function assignHandle() {
    var element = document.getElementById("elementId");
    element.onclick = function () {
        //element的onclick引用了匿名函數(shù)，
        //匿名函數(shù)又通過(guò)閉包引用了element，造成了循環(huán)引用
        console.log(element.id);
    };
}

這個(gè)例子中，循環(huán)引用導(dǎo)致了element引用數(shù)至少為1，element所占內(nèi)存就永遠(yuǎn)不會(huì)被回收，從而導(dǎo)致了內(nèi)存泄漏問(wèn)題。要解決這個(gè)問(wèn)題，就需要解除對(duì)DOM對(duì)象的引用，減少引用數(shù)，確保正常回收其所占用的內(nèi)存。

引用計(jì)數(shù)的含義是跟蹤記錄每個(gè)值被引用的次數(shù)。當(dāng)聲明了一個(gè)變量并將一個(gè)引用類型值賦給該變量時(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)這個(gè)值了，因而就可以將其占用的內(nèi)存空間回收回來(lái)。

在采用引用計(jì)數(shù)策略的實(shí)現(xiàn)中，出現(xiàn)循環(huán)引用時(shí)，由于變量的引用次數(shù)永遠(yuǎn)不會(huì)是0，函數(shù)被多次調(diào)用時(shí)，就會(huì)導(dǎo)致大量?jī)?nèi)存得不到回收。 這一部分理解可以參考MDN中JavaScript內(nèi)存管理。

結(jié)語(yǔ)

JavaScript閉包是極其有用的特性，但是由于閉包會(huì)攜帶包含它的函數(shù)的作用域，占用更多內(nèi)存，過(guò)多使用閉包可能會(huì)導(dǎo)致內(nèi)存占用過(guò)多。