我理解的JavaScript閉包

閉包是前端開發中的一個重要概念,也是前端面試的必問問題之一。對于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.

參考自wiki百科 Scope (computer science)

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.

參考自wiki百科 Scope (computer science)

在詞法作用域中,一個name是否有效取決于它在源代碼中的位置,也就是詞法上下文。而動態作用域要相對復雜一點,在動態作用域中,一個name是否有效取決于這個程序的運行時狀態,也就是運行時上下文。

對詞法作用域在JavaScript中的表現在本文不作闡述,具體參考這篇博文:深入理解javascript原型和閉包(12)——簡介【作用域】

對Closure的一些定義

各種專業文獻上的"閉包"(closure)定義非常抽象,很難看懂。我的理解是,閉包就是能夠讀取其他函數內部變量的函數。

參考自阮一峰 學習Javascript閉包(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百科 Closure(computer programming)

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)——簡介【作用域】

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,182評論 6 543
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,489評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,290評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,776評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,510評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,866評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,860評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,036評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,585評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,331評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,536評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,058評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,754評論 3 349
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,154評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,469評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,273評論 3 399
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,505評論 2 379

推薦閱讀更多精彩內容