我研究JavaScript閉包（closure）已經有一段時間了。我之前只是學會了如何使用它們，而沒有透徹地瞭解它們具體是如何運作的。那麼，究竟什麼是閉包？
Wikipedia給出的解釋並沒有太大的幫助。閉包是什麼時候被創建的，什麼時候被銷燬的？具體的實現又是怎麼樣的？
現在，我終於知道了答案，我感到很興奮並且決定向大家解釋這個答案。至少，我一定是不會忘記這個答案的。
Tellme and I forget. Teach me and I remember. Involve me and I learn. ©Benjamin Franklin
並且，在我閱讀與閉包相關的現存的資料時，我很努力地嘗試著去在腦海中想想每個事物之間的聯繫：對象之間是如何引用的，對象之間的繼承關係是什麼，等等。我找不到關於這些負責關係的很好的圖表，於是我決定自己畫一些。
我將假設讀者對JavaScript已經比較熟悉了，知道什麼是全局對象，知道函數在JavaScript當中是“first-classobjects”，等等。
作用域鏈（ScopeChain）
當JavaScript在運行的時候，它需要一些空間讓它來存儲本地變量（localvariables）。我們將這些空間稱為作用域對象（Scopeobject），有時候也稱作LexicalEnvironment。例如，當你調用函數時，函數定義了一些本地變量，這些變量就被存儲在一個作用域對象中。你可以將作用域函數想象成一個普通的JavaScript對象，但是有一個很大的區別就是你不能夠直接在JavaScript當中直接獲取這個對象。你只可以修改這個對象的屬性，但是你不能夠獲取這個對象的引用。
作用域對象的概念使得JavaScript和C、C++非常不同。在C、C++中，本地變量被保存在棧（stack）中。在JavaScript中，作用域對象是在堆中被創建的（至少表現出來的行為是這樣的），所以在函數返回後它們也還是能夠被訪問到而不被銷燬。
正如你做想的，作用域對象是可以有父作用域對象（parentscopeobject）的。當代碼試圖訪問一個變量的時候，解釋器將在當前的作用域對象中查找這個屬性。如果這個屬性不存在，那麼解釋器就會在父作用域對象中查找這個屬性。就這樣，一直向父作用域對象查找，直到找到該屬性或者再也沒有父作用域對象。我們將這個查找變量的過程中所經過的作用域對象乘坐作用域鏈（Scopechain）。
在作用域鏈中查找變量的過程和原型繼承（prototypalinheritance）有著非常相似之處。但是，非常不一樣的地方在於，當你在原型鏈（prototypechain）中找不到一個屬性的時候，並不會引發一個錯誤，而是會得到undefined。但是如果你試圖訪問一個作用域鏈中不存在的屬性的話，你就會得到一個ReferenceError。
在作用域鏈的最頂層的元素就是全局對象（GlobalObject）了。運行在全局環境的JavaScript代碼中，作用域鏈始終只含有一個元素，那就是全局對象。所以，當你在全局環境中定義變量的時候，它們就會被定義到全局對象中。當函數被調用的時候，作用域鏈就會包含多個作用域對象。
全局環境中運行的代碼
好了，理論就說到這裡。接下來我們來從實際的代碼入手。
我們在全局環境中創建了兩個變量。正如我剛才所說，此時的作用域對象就是全局對象。
在上面的代碼中，我們有一個執行的上下文（myscript.js自身的代碼），以及它所引用的作用域對象。全局對象裡面還含有很多不同的屬性，在這裡我們就忽略掉了。
沒有被嵌套的函數（Non-nestedfunctions）
接下來，我們看這段代碼
當myFunc被定義的時候，myFunc的標識符（identifier）就被加到了當前的作用域對象中（在這裡就是全局對象），並且這個標識符所引用的是一個函數對象（functionobject）。函數對象中所包含的是函數的源代碼以及其他的屬性。其中一個我們所關心的屬性就是內部屬性[[scope]]。[[scope]]所指向的就是當前的作用域對象。也就是指的就是函數的標識符被創建的時候，我們所能夠直接訪問的那個作用域對象（在這裡就是全局對象）。
“直接訪問”的意思就是，在當前作用域鏈中，該作用域對象處於最底層，沒有子作用域對象。
所以，在console.log("outside")被運行之前，對象之間的關係是如下圖所示。
溫習一下。myFunc所引用的函數對象其本身不僅僅含有函數的代碼，並且還含有指向其被創建的時候的作用域對象。這一點非常重要！
當myFunc函數被調用的時候，一個新的作用域對象被創建了。新的作用域對象中包含myFunc函數所定義的本地變量，以及其參數（arguments）。這個新的作用域對象的父作用域對象就是在運行myFunc時我們所能直接訪問的那個作用域對象。
所以，當myFunc被執行的時候，對象之間的關係如下圖所示。
現在我們就擁有了一個作用域鏈。當我們試圖在myFunc當中訪問某些變量的時候，JavaScript會先在其能直接訪問的作用域對象（這裡就是myFunc()scope）當中查找這個屬性。如果找不到，那麼就在它的父作用域對象當中查找（在這裡就是GlobalObject）。如果一直往上找，找到沒有父作用域對象為止還沒有找到的話，那麼就會拋出一個ReferenceError。
例如，如果我們在myFunc中要訪問a這個變量，那麼在myFuncscope當中就可以找到它，得到值為1。
如果我們嘗試訪問foo，我們就會在myFunc()scope中得到3。只有在myFunc()scope裡面找不到foo的時候，JavaScript才會往GlobalObject去查找。所以，這裡我們不會訪問到GlobalObject裡面的foo。
如果我們嘗試訪問bar，我們在myFunc()scope當中找不到它，於是就會在GlobalObject當中查找，因此查找到2。
很重要的是，只要這些作用域對象依然被引用，它們就不會被垃圾回收器（garbagecollector）銷燬，我們就一直能訪問它們。當然，當引用一個作用域對象的最後一個引用被解除的時候，並不代表垃圾回收器會立刻回收它，只是它現在可以被回收了。
所以，當myFunc()返回的時候，再也沒有人引用myFunc()scope了。當垃圾回收結束後，對象之間的關係變成回了調用前的關係。
接下來，為了圖表直觀起見，我將不再將函數對象畫出來。但是，請永遠記著，函數對象裡面的[[scope]]屬性，保存著該函數被定義的時候所能夠直接訪問的作用域對象。
嵌套的函數（Nestedfunctions）
正如前面所說，當一個函數返回後，沒有其他對象會保存對其的引用。所以，它就可能被垃圾回收器回收。但是如果我們在函數當中定義嵌套的函數並且返回，被調用函數的一方所存儲呢？（如下面的代碼）
你已經知道的是，函數對象中總是有一個[[scope]]屬性，保存著該函數被定義的時候所能夠直接訪問的作用域對象。所以，當我們在定義嵌套的函數的時候，這個嵌套的函數的[[scope]]就會引用外圍函數（Outerfunction）的當前作用域對象。
如果我們將這個嵌套函數返回，並被另外一個地方的標識符所引用的話，那麼這個嵌套函數及其[[scope]]所引用的作用域對象就不會被垃圾回收所銷燬。
當我們調用createCounter(100)的那一瞬間，對象之間的關係如下圖
注意increment和get函數都存有指向createCounter(100)scope的引用。如果createCounter(100)沒有任何返回值，那麼createCounter(100)scope不再被引用，於是就可以被垃圾回收。但是因為createCounter(100)實際上是有返回值的，並且返回值被存儲在了myCounter中，所以對象之間的引用關係變成了如下圖所示
所以，createCounter(100)雖然已經返回了，但是它的作用域對象依然存在，可以且僅只能被嵌套的函數（increment和get）所訪問。
讓我們試著運行myCounter.get()。剛才說過，函數被調用的時候會創建一個新的作用域對象，並且該作用域對象的父作用域對象會是當前可以直接訪問的作用域對象。所以，當myCounter.get()被調用時的一瞬間，對象之間的關係如下。
在myCounter.get()運行的過程中，作用域鏈最底層的對象就是get()scope，這是一個空對象。所以，當myCounter.get()訪問counter變量時，JavaScript在get()scope中找不到這個屬性，於是就向上到createCounter(100)scope當中查找。然後，myCounter.get()將這個值返回。
調用myCounter.increment(5)的時候，事情變得更有趣了，因為這個時候函數調用的時候傳入了參數。
正如你所見，increment(5)的調用創建了一個新的作用域對象，並且其中含有傳入的參數value。當這個函數嘗試訪問value的時候，JavaScript立刻就能在當前的作用域對象找到它。然而，這個函數試圖訪問counter的時候，JavaScript無法在當前的作用域對象找到它，於是就會在其父作用域createCounter(100)scope中查找。
我們可以注意到，在createCounter函數之外，除了被返回的get和increment兩個方法，沒有其他的地方可以訪問到value這個變量了。
這就是用閉包實現“私有變量”的方法。我們注意到initial變量也被存儲在createCounter()所創建的作用域對象中，儘管它沒有被用到。所以，我們實際上可以去掉varcounter = initial;，將initial改名為counter。但是為了代碼的可讀性起見，我們保留原有的代碼不做變化。
需要注意的是作用域鏈是不會被複制的。每次函數調用只會往作用域鏈下面新增一個作用域對象。所以，如果在函數調用的過程當中對作用域鏈中的任何一個作用域對象的變量進行修改的話，那麼同時作用域鏈中也擁有該作用域對象的函數對象也是能夠訪問到這個變化後的變量的。
這也就是為什麼下面這個大家都很熟悉的例子會不能產出我們想要的結果。
在上面的循環中創建了多個函數對象，所有的函數對象的[[scope]]都保存著對當前作用域對象的引用。而變量i正好就在當前作用域鏈中，所以循環每次對i的修改，對於每個函數對象都是能夠看到的。
“看起來一樣的”函數，不一樣的作用域對象
現在我們來看一個更有趣的例子。
在上面的例子中，myCounter1.increment和myCounter2.increment的函數對象擁有著一樣的代碼以及一樣的屬性值（name，length等等），但是它們的[[scope]]指向的是不一樣的作用域對象。
這才有了下面的結果
作用域鏈和this
this的值不會被保存在作用域鏈中，this的值取決於函數被調用的時候的情景。
譯者注：對這部分，譯者自己曾經寫過一篇更加詳盡的文章，請參考《用自然語言的角度理解JavaScript中的this關鍵字》。原文的這一部分以及“this在嵌套的函數中的使用”譯者便不再翻譯。
總結
讓我們來回想我們在本文開頭提到的一些問題。
- 什麼是閉包？閉包就是同時含有對函數對象以及作用域對象引用的最想。實際上，所有JavaScript對象都是閉包。
- 閉包是什麼時候被創建的？因為所有JavaScript對象都是閉包，因此，當你定義一個函數的時候，你就定義了一個閉包。
- 閉包是什麼時候被銷燬的？當它不被任何其他的對象引用的時候。
專有名詞翻譯表
本文采用下面的專有名詞翻譯表，如有更好的翻譯請告知，尤其是加*的翻譯
- *全局環境中運行的代碼：top-levelcode
- 參數：arguments
- 作用域對象：Scopeobject
- 作用域鏈：ScopeChain
- 棧：stack
- 原型繼承：prototypalinheritance
- 原型鏈：prototypechain
- 全局對象：GlobalObject
- 標識符：identifier
- 垃圾回收器：garbagecollector
閱讀更多 渡一教育web前端開發 的文章
關鍵字: 編程語言 JavaScript 技術
