本文是我學(xué)習(xí)閉包以來的總結(jié)和體會， 錯誤或者不當之處還請讀者指出， 以免誤導(dǎo)后學(xué)。
如果轉(zhuǎn)載請在正文開頭注明文章來源， 以便讀者可以看到及時的更新。
學(xué)習(xí)東西首先要抓住重點， 用最少的精力獲取最大成果， 其余的就是摟草打兔子, 順便學(xué)了。
JavaScript 的重點和難點之一就是閉包, 學(xué)好閉包機制 Javascript level up 50%；
學(xué)習(xí)閉包機制時， 個人建議參照 ECMAScript 規(guī)范 和 V8 引擎 學(xué)習(xí)。理論實踐相結(jié)合。
下面是一些關(guān)于閉包的描述， 摘錄權(quán)威性的文獻或資料：
<<JavaScript權(quán)威指南>>(第六版) p183
從技術(shù)角度來講， 所有的JavaScript函數(shù)都是閉包：它們都是對象，它們都關(guān)聯(lián)到作用域鏈。
<<JavaScript權(quán)威指南>>(第六版) p183
函數(shù)變量可以被隱藏于作用域鏈中， 因此看起來是函數(shù)將變量“包裹”了起來.
<<JavaScript高級程序設(shè)計(第三版)>> p178
閉包是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)。
You Don't Know JS: Scope & Closures
Closure is when a function is able to remember and access its lexical scope
even when that function is executing outside its lexical scope.
A closure is the combination of a function and the lexical environment within which that function was declared.
某百科
In programming languages, a closure (also lexical closure or function closure) is a technique
for implementing lexically scoped name binding in a language with first-class functions.
Operationally, a closure is a record storing a function together with an environment.
The environment is a mapping associating each free variable of the function
(variables that are used locally, but defined in an enclosing scope) with the value or reference
to which the name was bound when the closure was created.
A closure—unlike a plain function—allows the function to access those captured variables
through the closure's copies of their values or references, even when the function is invoked outside their scope.
初學(xué)者看到這么多定義， 很容易迷糊， 如盲人摸象， 管中窺豹。
到底哪種定義更加全面， 更加接近閉包的本質(zhì)？
要明白某個名詞， 尋糾它的起源是搞明白其含義的妙招。
閉包到底是怎么來的， 這種概念是怎么出現(xiàn)的， 閉包到底解決了什么問題？
首先明確一點， 閉包并不是 JavaScript 所獨有的概念， 其他語言也有其實現(xiàn)
在 JavaScript 中， 函數(shù)是一等公民: 函數(shù)可以作為參數(shù)傳遞， 可以從函數(shù)返回， 可以修改， 可以賦值給變量。
在支持 函數(shù)是一等公民的編程語言中， 要面臨一個問題—— funarg problem, 如何處理自由變量 (變量既不是函數(shù)的參數(shù)， 也不是局部變量)
funarg problem 分 upwards funarg problem 和 downwards funarg problem 兩種。
upwards funarg problem 發(fā)生在函數(shù)將其嵌套函數(shù)作為返回值返回時(嵌套函數(shù)使用了自由變量)。
downwards funarg problem 發(fā)生在將函數(shù)作為參數(shù)傳入函數(shù)時。
舉例來說， 下面是 downwards funarg problem
let x = 10;
function foo() {
console.log(x);
}
function bar(funArg) {
let x = 20;
funArg(); // 10, 不是 20
}
// 將 `foo` 作為參數(shù)傳給 `bar`.
bar(foo);
對于函數(shù) foo 來說， x 就是其自由變量。 函數(shù) foo 內(nèi)的 變量 x 應(yīng)該解析到全局環(huán)境中值為 10 的 x（即采用靜態(tài)作用域）還是 bar 函數(shù)中值為 20 的 x (即采用動態(tài)作用域)?
JavaScript 解決這個問題， 通過采用 靜態(tài)作用域(或者說詞法作用域 —— 函數(shù)作用域是在定義函數(shù)時就確定的， 而不是運行時。)。
還有個 upwards funarg problem：
function foo() {
var a = { x: 1, y: 2 }; // 對象
var b = 10; // 基本數(shù)據(jù)類型
function bar(param) {
return param+ b;
}
return bar;
}
var b = 20;
var func = foo();
console.log(func(1));
這個例子是我們在 JS 中經(jīng)常見到的例子，雖然看起來很簡單， 其中卻大有學(xué)問。
我們知道， 通常來說， 在基于棧的函數(shù)內(nèi)存分配范式中， 調(diào)用函數(shù)時， 會將其參數(shù)和局部變量保存在棧的棧幀(或者活動記錄)上， 函數(shù)調(diào)用結(jié)束后， 保存其參數(shù)和局部變量的棧幀就會從調(diào)用棧中彈出。
上述例子中， bar 函數(shù)執(zhí)行時， foo 函數(shù)的棧幀已經(jīng)從調(diào)用棧中彈出，如果沒有某種機制， 其局部變量 a 和 b 就都不存在了， bar 根本不可能獲取到變量 b 的值。
怎么辦？
一個辦法就是， 有外部引用引用 變量 b 時， 禁止函數(shù) foo 的棧幀從棧中彈出，但是這打破了函數(shù)基于棧的內(nèi)存分配范式(函數(shù)調(diào)用完畢后， 應(yīng)該將其棧幀從棧中彈出)
怎么能夠既可以使函數(shù)遵循基于棧的內(nèi)存分配， 還可以使 bar 在 foo 返回后仍然可以獲取到 b 的值呢？
方案一：
在堆而不是棧上分配所有棧幀，當棧幀不再需要時， 依賴某種形式的 垃圾回收 或者 引用計數(shù) 來釋放棧幀。由于在堆上管理棧幀遠遠沒在棧上管理來的高效， 這種策略可能嚴重降低性能。而且， 因為在通常的程序中大多數(shù)函數(shù)并不會創(chuàng)建 upwards funargs(當函數(shù)作為參數(shù)時， 該函數(shù)就叫 funarg)， 很多這種損耗是不必要的。
方案二：
一些考慮性能的編譯器會采用混合方式: 如果編譯器通過 靜態(tài)程序分析 推斷出函數(shù)沒有創(chuàng)建 upwards funargs， 那么 函數(shù)的棧幀就會在棧上分配， 否則的話， 在堆上分配棧幀。
方案三：
利用閉包。 閉包創(chuàng)建時， 將變量的值拷貝進閉包。在可變變量(mutable variables) 的情況下，這將導(dǎo)致不同的行為，因為狀態(tài)不能夠在閉包之間共享。
在實際的引擎實現(xiàn)中，出于性能的考慮，可能會對閉包存儲的變量進行優(yōu)化， 比如只保存自由變量(v8 即是采用了這種優(yōu)化方式)。
JavaScript 正是采用了第三種方案， 利用閉包機制。
那么閉包到底是怎么實現(xiàn)的呢？
某百科有段描述， 摘錄翻譯如下:
閉包通常是由一種特殊的數(shù)據(jù)結(jié)構(gòu)實現(xiàn)的， 該數(shù)據(jù)結(jié)構(gòu)包括指向函數(shù)代碼的指針， 以及閉包創(chuàng)建時函數(shù)詞法環(huán)境(換句話說， 可獲取到的變量集)的表示。 引用的環(huán)境在閉包創(chuàng)建時將非局部名稱(也就是自由變量)綁定到對應(yīng)的變量， 此外， 將它們的生存期擴展到至少和閉包的生存期一樣長。 稍后進入閉包時可能是在不同的詞法環(huán)境中， 當函數(shù)執(zhí)行時使用的非本局部變量將會引用閉包捕獲的變量，而不是當前環(huán)境的變量。
在 ES3 規(guī)范下， 閉包為函數(shù)代碼 + 該函數(shù)的所有父作用域(也就是函數(shù)內(nèi)部屬性[[Scopes]]), 可以用偽碼表示:
Closure = {
functionCode: <pointerToFunctionCode>,
[[Scopes]]: []
}
JavaScript 中 所有的函數(shù)(函數(shù)聲明、函數(shù)表達式、命名函數(shù)、匿名函數(shù))均有內(nèi)部屬性 [[Scopes]] 。從圖中(NodeJS 8.11.3 vscode 調(diào)試結(jié)果)看的話是這樣子的:
從上圖可以看出， 所有的函數(shù)(函數(shù)聲明、函數(shù)表達式、命名函數(shù)、匿名函數(shù))均有 [[FunctionLocation]] 和 [[Scopes]]。
所以從技術(shù)角度來看， 所有的函數(shù)都是閉包。
閉包中保存了 所有捕捉到的自由變量， 眼見為實
這是 谷歌瀏覽器中調(diào)試到的結(jié)果， 可以看出：
(一) bar 執(zhí)行時， Closure(foo) 中只包含了 bar 使用的自由變量 b， 沒有包含 foo 的局部變量 a。(明顯這是經(jīng)過了優(yōu)化， 只會保留自由變量。如果未優(yōu)化的話， Closure(foo) 中會有變量 a 、b、bar、arguments)
(二) 調(diào)用棧中， 只有 (anonymous) 和 bar, 沒有 foo， bar 執(zhí)行時 foo 函數(shù)已經(jīng)從調(diào)用棧中彈出(網(wǎng)上仍然有很多博客錯誤的認為閉包函數(shù)執(zhí)行時， 定義該函數(shù)的上下文并沒有出棧)
call stack 這個概念比較通用， 在 ECMAScript中， execution context stack 就是 call stack。 類似于錢這個概念， 各國都有錢， 在我們中國， 錢就是人民幣， 在美國就是美元。
驗證: 只有自由變量存在的情況下，才會有真正意義上的閉包。
函數(shù) bar 處于 foo 中 且 foo 已把 bar 返回， 但是 bar 執(zhí)行的時候并沒有產(chǎn)生閉包。 由此可以看來， 沒有自由變量存在的話， 不會有閉包， 而這同樣是 v8 進行優(yōu)化過后的結(jié)果。( 如果涉及到 v8 的話， <<JavaScript 高級程序設(shè)計>> 中所講的 “閉包是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)” 是不是不是很確切，個人認為， 有權(quán)且訪問了 更合適。)
這里 雖然 foo 沒有把 bar 返回在詞法作用域之外執(zhí)行， V8 依舊認為生成了閉包。(這個例子， 在<<You don't know JS>> 中并不認為是閉包)
還有個問題就是: 閉包存放在哪里?
可以看到當 foo(2) 執(zhí)行到圖示位置， bar 函數(shù)的內(nèi)部屬性 [[Scopes]] 已經(jīng)保存了對 foo 的閉包， 此閉包中保存了自由變量 a 和其值 2。然后， foo(2) 將返回值(也就是函數(shù)對象 bar)賦值給了變量 baz 。
此時， baz 持有的就是這個 bar 函數(shù)對象:
foo(2) 返回后其內(nèi)部的所有變量銷毀。
當執(zhí)行 baz() 時， bar 函數(shù)內(nèi)部的 a 的值就從 [[Scopes]][0]中獲取到了, 如下圖:
這些東西都搞明白后，再看文章開頭的幾個定義是不是清晰很多了。
總結(jié):
由于作用域鏈機制的存在， 從技術(shù)上來講，JavaScript 中 所有的函數(shù)(函數(shù)聲明、函數(shù)表達式、命名函數(shù)、匿名函數(shù))都是閉包。
閉包是保存函數(shù)代碼和定義函數(shù)的環(huán)境的記錄， 此環(huán)境存儲著閉包創(chuàng)建時函數(shù)的每個自由變量和其值或引用的映射。
在實際的閉包應(yīng)用(比如內(nèi)存性能優(yōu)化分析)中， 我們真正要關(guān)注的閉包應(yīng)當是:
- 函數(shù)作為參數(shù)傳遞 或者 從另一個函數(shù)中返回
- 函數(shù)內(nèi)部使用了自由變量
小測驗
對于方案三中提到的
狀態(tài)不能夠在閉包之間共享如何理解呢?
拿《JavaScript 權(quán)威指南》(第六版) 中的一個例子來說(p185):function counter() { var n = 0; return { count: function() { return n++; }, reset: function() { n = 0;} }; } var c = counter(), d = counter(); // 創(chuàng)建兩個計數(shù)器 c.count(); // => 0 d.count(); // => 0 c.reset(); c.count(); // => 0; d.count(); // => 1counter() 調(diào)用了兩次，得到了兩個計數(shù)器對象, 調(diào)用其中一個計數(shù)器對象的 count() 或者 reset() 不會影響到另一個對象。counter() 中的狀態(tài)
n在兩個計數(shù)器對象之間不是共享的。
思考一下， 這是為什么？
參考資料:
- Closure 自行在某百科搜索關(guān)鍵詞
- Funarg_problem 自行在某百科搜索關(guān)鍵詞
- lexical-environments-ecmascript-implementation
