如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

我研究JavaScript 閉包（closure）已經(jīng)有一段時間了。我之前只是學(xué)會了如何使用它們，而沒有透徹地了解它們具體是如何運作的。那么，究竟什么是閉包？

Wikipedia給出的解釋并沒有太大的幫助。閉包是什么時候被創(chuàng)建的，什么時候被銷毀的？具體的實現(xiàn)又是怎么樣的？

"use strict"; var myClosure = (function outerFunction() { var hidden = 1; return {
    inc: function innerFunction() { return hidden++;
    }
  };

}());

myClosure.inc(); // 返回 1 myClosure.inc(); // 返回 2 myClosure.inc(); // 返回 3 // 相信對JS熟悉的朋友都能很快理解這段代碼 // 那么在這段代碼運行的背后究竟發(fā)生了怎樣的事情呢？

現(xiàn)在，我終于知道了答案，我感到很興奮并且決定向大家解釋這個答案。至少，我一定是不會忘記這個答案的。

Tell me and I forget. Teach me and I remember. Involve me and I learn.
© Benjamin Franklin

并且，在我閱讀與閉包相關(guān)的現(xiàn)存的資料時，我很努力地嘗試著去在腦海中想想每個事物之間的聯(lián)系：對象之間是如何引用的，對象之間的繼承關(guān)系是什么，等等。我找不到關(guān)于這些負(fù)責(zé)關(guān)系的很好的圖表，于是我決定自己畫一些。

我將假設(shè)讀者對JavaScript已經(jīng)比較熟悉了，知道什么是全局對象，知道函數(shù)在JavaScript當(dāng)中是“first-class objects”，等等。

作用域鏈（Scope Chain）

當(dāng)JavaScript在運行的時候，它需要一些空間讓它來存儲本地變量（local variables）。我們將這些空間稱為作用域?qū)ο螅⊿cope object），有時候也稱作LexicalEnvironment。例如，當(dāng)你調(diào)用函數(shù)時，函數(shù)定義了一些本地變量，這些變量就被存儲在一個作用域?qū)ο笾?。你可以將作用域函?shù)想象成一個普通的JavaScript對象，但是有一個很大的區(qū)別就是你不能夠直接在JavaScript當(dāng)中直接獲取這個對象。你只可以修改這個對象的屬性，但是你不能夠獲取這個對象的引用。

作用域?qū)ο蟮母拍钍沟肑avaScript和C、C++非常不同。在C、C++中，本地變量被保存在棧（stack）中。在JavaScript中，作用域?qū)ο笫窃诙阎斜粍?chuàng)建的（至少表現(xiàn)出來的行為是這樣的），所以在函數(shù)返回后它們也還是能夠被訪問到而不被銷毀。

正如你做想的，作用域?qū)ο笫强梢杂懈缸饔糜驅(qū)ο螅╬arent scope object）的。當(dāng)代碼試圖訪問一個變量的時候，解釋器將在當(dāng)前的作用域?qū)ο笾胁檎疫@個屬性。如果這個屬性不存在，那么解釋器就會在父作用域?qū)ο笾胁檎疫@個屬性。就這樣，一直向父作用域?qū)ο蟛檎遥钡秸业皆搶傩曰蛘咴僖矝]有父作用域?qū)ο?。我們將這個查找變量的過程中所經(jīng)過的作用域?qū)ο蟪俗饔糜蜴湥⊿cope chain）。

在作用域鏈中查找變量的過程和原型繼承（prototypal inheritance）有著非常相似之處。但是，非常不一樣的地方在于，當(dāng)你在原型鏈（prototype chain）中找不到一個屬性的時候，并不會引發(fā)一個錯誤，而是會得到undefined。但是如果你試圖訪問一個作用域鏈中不存在的屬性的話，你就會得到一個ReferenceError。

在作用域鏈的最頂層的元素就是全局對象（Global Object）了。運行在全局環(huán)境的JavaScript代碼中，作用域鏈?zhǔn)冀K只含有一個元素，那就是全局對象。所以，當(dāng)你在全局環(huán)境中定義變量的時候，它們就會被定義到全局對象中。當(dāng)函數(shù)被調(diào)用的時候，作用域鏈就會包含多個作用域?qū)ο蟆?

全局環(huán)境中運行的代碼

好了，理論就說到這里。接下來我們來從實際的代碼入手。

// my_script.js "use strict"; var foo = 1; var bar = 2;

我們在全局環(huán)境中創(chuàng)建了兩個變量。正如我剛才所說，此時的作用域?qū)ο缶褪侨謱ο蟆?

在上面的代碼中，我們有一個執(zhí)行的上下文（myscript.js自身的代碼），以及它所引用的作用域?qū)ο蟆Ｈ謱ο罄锩孢€含有很多不同的屬性，在這里我們就忽略掉了。

沒有被嵌套的函數(shù)（Non-nested functions）

接下來，我們看這段代碼

"use strict"; var foo = 1; var bar = 2; function myFunc() { //-- define local-to-function variables var a = 1; var b = 2; var foo = 3; console.log("inside myFunc");
} console.log("outside"); //-- and then, call it: myFunc();

當(dāng)myFunc被定義的時候，myFunc的標(biāo)識符（identifier）就被加到了當(dāng)前的作用域?qū)ο笾校ㄔ谶@里就是全局對象），并且這個標(biāo)識符所引用的是一個函數(shù)對象（function object）。函數(shù)對象中所包含的是函數(shù)的源代碼以及其他的屬性。其中一個我們所關(guān)心的屬性就是內(nèi)部屬性[[scope]]。[[scope]]所指向的就是當(dāng)前的作用域?qū)ο?。也就是指的就是函?shù)的標(biāo)識符被創(chuàng)建的時候，我們所能夠直接訪問的那個作用域?qū)ο螅ㄔ谶@里就是全局對象）。

“直接訪問”的意思就是，在當(dāng)前作用域鏈中，該作用域?qū)ο筇幱谧畹讓?，沒有子作用域?qū)ο蟆?

所以，在console.log("outside")被運行之前，對象之間的關(guān)系是如下圖所示。

溫習(xí)一下。myFunc所引用的函數(shù)對象其本身不僅僅含有函數(shù)的代碼，并且還含有指向其被創(chuàng)建的時候的作用域?qū)ο?/strong>。這一點非常重要！

function myFunc() { return innerFunc() { // ... }
} var innerFunc = myFunc();

"use strict"; function createCounter(initial) { var counter = initial; function increment(value) {
    counter += value;
  } function get() { return counter;
  } return {
    increment: increment,
    get: get
  };
} var myCounter = createCounter(100); console.log(myCounter.get()); // 返回 100 myCounter.increment(5); console.log(myCounter.get()); // 返回 105

所以，createCounter(100)雖然已經(jīng)返回了，但是它的作用域?qū)ο笠廊淮嬖?，可?strong style="padding-bottom:0px;padding-top:0px;padding-left:0px;margin:0px;padding-right:0px;">且僅只能被嵌套的函數(shù)（increment和get）所訪問。

讓我們試著運行myCounter.get()。剛才說過，函數(shù)被調(diào)用的時候會創(chuàng)建一個新的作用域?qū)ο?，并且該作用域?qū)ο蟮母缸饔糜驅(qū)ο髸钱?dāng)前可以直接訪問的作用域?qū)ο?。所以，?dāng)myCounter.get()被調(diào)用時的一瞬間，對象之間的關(guān)系如下。

在myCounter.get()運行的過程中，作用域鏈最底層的對象就是get() scope，這是一個空對象。所以，當(dāng)myCounter.get()訪問counter變量時，JavaScript在get() scope中找不到這個屬性，于是就向上到createCounter(100) scope當(dāng)中查找。然后，myCounter.get()將這個值返回。

調(diào)用myCounter.increment(5)的時候，事情變得更有趣了，因為這個時候函數(shù)調(diào)用的時候傳入了參數(shù)。

正如你所見，increment(5)的調(diào)用創(chuàng)建了一個新的作用域?qū)ο螅⑶移渲泻袀魅氲膮?shù)value。當(dāng)這個函數(shù)嘗試訪問value的時候，JavaScript立刻就能在當(dāng)前的作用域?qū)ο笳业剿?。然而，這個函數(shù)試圖訪問counter的時候，JavaScript無法在當(dāng)前的作用域?qū)ο笳业剿?，于是就會在其父作用?code style="font-size:12px;font-family:'courier new';color:#777777;padding-bottom:1px;padding-top:1px;padding-left:4px;margin:0px 4px;padding-right:4px;background-color:#eeeeee;border-radius:2px;">createCounter(100) scope中查找。

我們可以注意到，在createCounter函數(shù)之外，除了被返回的get和increment兩個方法，沒有其他的地方可以訪問到value這個變量了。這就是用閉包實現(xiàn)“私有變量”的方法。

我們注意到initial變量也被存儲在createCounter()所創(chuàng)建的作用域?qū)ο笾?，盡管它沒有被用到。所以，我們實際上可以去掉var counter = initial;，將initial改名為counter。但是為了代碼的可讀性起見，我們保留原有的代碼不做變化。

需要注意的是作用域鏈?zhǔn)遣粫粡?fù)制的。每次函數(shù)調(diào)用只會往作用域鏈下面新增一個作用域?qū)ο?。所以，如果在函?shù)調(diào)用的過程當(dāng)中對作用域鏈中的任何一個作用域?qū)ο蟮淖兞窟M行修改的話，那么同時作用域鏈中也擁有該作用域?qū)ο蟮暮瘮?shù)對象也是能夠訪問到這個變化后的變量的。

這也就是為什么下面這個大家都很熟悉的例子會不能產(chǎn)出我們想要的結(jié)果。

"use strict"; var elems = document.getElementsByClassName("myClass"), i; for (i = 0; i < elems.length; i++) {
  elems[i].addEventListener("click", function () { this.innerHTML = i;
  });
}

在上面的循環(huán)中創(chuàng)建了多個函數(shù)對象，所有的函數(shù)對象的[[scope]]都保存著對當(dāng)前作用域?qū)ο蟮囊?。而變?code style="font-size:12px;font-family:'courier new';color:#777777;padding-bottom:1px;padding-top:1px;padding-left:4px;margin:0px 4px;padding-right:4px;background-color:#eeeeee;border-radius:2px;">i正好就在當(dāng)前作用域鏈中，所以循環(huán)每次對i的修改，對于每個函數(shù)對象都是能夠看到的。

“看起來一樣的”函數(shù)，不一樣的作用域?qū)ο?

現(xiàn)在我們來看一個更有趣的例子。

"use strict"; function createCounter(initial) { // ... } var myCounter1 = createCounter(100); var myCounter2 = createCounter(200);

當(dāng)myCounter1和myCounter2被創(chuàng)建后，對象之間的關(guān)系為

在上面的例子中，myCounter1.increment和myCounter2.increment的函數(shù)對象擁有著一樣的代碼以及一樣的屬性值（name，length等等），但是它們的[[scope]]指向的是不一樣的作用域?qū)ο?/strong>。

var a, b;
a = myCounter1.get(); // a 等于 100 b = myCounter2.get(); // b 等于 200 myCounter1.increment(1);
myCounter1.increment(2);

myCounter2.increment(5);

a = myCounter1.get(); // a 等于 103 b = myCounter2.get(); // b 等于 205