閉包是前端開發中的一個重要概念,也是前端面試的必問問題之一。對于JavaScript初學者而言,閉包學習JavaScript的一大障礙。網上有很多閉包的教程,形象地告訴了我閉包長什么樣。但是大部分教程沒有對閉包的定義給出精準的表達,也沒有對閉包背后的一些原理和邏輯進行解釋。本文通過整合網上各路資料,對閉包前前后后的知識點進行梳理,希望可以幫助大家準確并且深刻理解閉包的概念。(本文假設大家對閉包有一定的理解)
Scope
要理解閉包,先要理解一個重要概念—作用域。
In computer programming, the scope of a name binding – an association of a name to an entity, such as a variable – is the region of a computer program where the binding is valid: where the name can be used to refer to the entity.
Such a region referred to as is a scope block.
scope又可以分為詞法作用域(Lexical scope)和動態作用域(Dynamic scope)。兩者區別與對區域這個概念的解讀。Wiki百科對兩者的解釋如下:
In languages with lexical scope (also called static scope), name resolution depends on the location in the source code and the lexical context, which is defined by where the named variable or function is defined. In contrast, in languages with dynamic scope the name resolution depends upon the program state when the name is encountered which is determined by the execution context or calling context.
在詞法作用域中,一個name是否有效取決于它在源代碼中的位置,也就是詞法上下文。而動態作用域要相對復雜一點,在動態作用域中,一個name是否有效取決于這個程序的運行時狀態,也就是運行時上下文。
對詞法作用域在JavaScript中的表現在本文不作闡述,具體參考這篇博文:深入理解javascript原型和閉包(12)——簡介【作用域】
對Closure的一些定義
各種專業文獻上的"閉包"(closure)定義非常抽象,很難看懂。我的理解是,閉包就是能夠讀取其他函數內部變量的函數。
A closure is the combination of a function and the lexical environment within which that function was declared.
參考自MDN Closure
MDN的定義指出了閉包需要的東西:閉包 = 函數 + 函數定義的詞法上下文環境。阮一峰老師的定義指出了閉包產生的現象:一個函數能夠讀取其他函數內部變量。
In programming languages, closures (also lexical closures or function closures) are techniques for implementing lexically scoped name binding in languages with first-class functions.
wiki百科上的定義指出了閉包需要的語言條件: first-class functions。關于這個知識點可以參考“函數是一等公民”背后的含義。另外,定義中提到的implementing lexically scoped name binding ,即基于詞法作用域的name綁定與scope中的binding概念相互照應。本質上就是說的就是詞法作用域與變量有效性的關系。
在JavaScript中,實現外部作用域訪問內部作用域中變量的方法叫做閉包。
參考自《深入淺出Node.js》
以上對閉包的定義都略有差別,有的將閉包定義為函數,有的將閉包定義為方法,也有將閉包定義為組合。我覺得將閉包理解為一個方法,或者某個東西都對。兩種定義的方法都對我們理解閉包有幫助。
JavaScript的閉包
我們都會遇到在一個外部函數套著一個內部函數的情況,比如說:
function foo(x) {
var tmp = 3;
function b(y) {
alert(x + y + (++tmp));
}
b(2);
b(3);
}
foo(0);
在foo函數結束的時候,tmp就會被銷毀。一般來說,當內部函數被return的時候,外部就可以引用內部的函數,閉包就會通過return而產生。如:
function foo(x) {
var tmp = 3;
return function (y) {
alert(x + y + (++tmp));
}
}
var bar = foo(2); // bar 現在是一個閉包
bar(10);
按照我們原本的理解,在沒有閉包的情況下,foo函數執行完,它內部的tmp變量就會被銷毀,但是因為外部函數引用了內部的變量產生了閉包,內部函數的詞法上下文沒有被銷毀,tmp變量也沒有被銷毀。
當然,也有不用閉包的return的例子,比如利用setInterval或者綁定一個事件等等方法:
function a(){
var temp = 0;// let也可以
function b(){
console.log(temp++);
}
// setInterval可以產生閉包
setInterval(b,1000);
// 綁定可以產生閉包
window.addEventListener('click',b);
// ajax傳入callback可以產生閉包
ajax(b);
// 或者直接把這個函數傳給window或者其它函數外部的元素
window.closure = b;
}
a();
可以看到,只要內部函數有機會在函數外部被調用,或者說內部函數被外部的某個變量引用,就會產生閉包。就像《深入淺出Node.js》中提到的那樣:
閉包是JavaScript中的高級特性,利用它可以產生很多巧妙的效果。它的問題在于,一旦有變量引用了這個中間函數,這個中間函數不會釋放,同時也使得原始作用域不會得到釋放。作用域中產生的內存占用也不會被釋放。除非不再有引用,才會逐步釋放。
參考自 《深入淺出Node.js》
參考資料
動態作用域和詞法域的區別是什么?
“函數是一等公民”背后的含義
js閉包的概念作用域內存模型
阮一峰 學習Javascript閉包(Closure)
javascript基礎拾遺——詞法作用域
深入理解javascript原型和閉包(12)——簡介【作用域】