JS-讀懂閉包

長久以來,閉包是前端同學面試必考的問題。會用閉包也成了高級前端開發者的標志,今天就來徹底弄清楚閉包的每一個細節。

1.閉包是什么?

比較官方的定義是:一個擁有許多變量和綁定了這些變量的環境的表達式(通常是一個函數),因而這些變量也是該表達式的一部分。

我個人的簡化理解是:閉包就是函數及函數上下文環境的集合。上下文可以理解為函數可以訪問到的所有變量。

很多人肯定這樣寫過JavaScript代碼:

var paramA = "test";
var functionA = function(){
  console.log(paramA);
}

這樣寫其實就是使用了閉包的概念,只是很多人并沒有意識到這是閉包。這段代碼值得注意的地方是函數functionA內部調用了函數外的變量paramA。這就是閉包的鮮明特征。

2.為什么會有閉包?

閉包是JavaScript鏈式作用域的副產品。閉包不是JavaScript獨有的特性,和JavaScript有類似作用域設計的語言也存在閉包,比如Python。

鏈式作用域的設計決定了子作用域中的函數可以訪問到父級作用域的變量,嵌套函數可以訪問到外部函數的變量。

借用一張圖來說明一下JavaScript的鏈式作用域。


圖片來自王福朋博客http://www.cnblogs.com/wangfupeng1988/p/3994065.html
3.閉包如何使用?

前面的小例子雖然體現了閉包的特征,但并不是一個真正的閉包函數。看下面這個例子:

function a() { 
 var i = 0; 
 function b() { console.log(i++); } 
 return b;
}
var c = a();
c();

這里函數b就是一個閉包函數,那為什么要用c去調用函數a呢?這是為了防止JavaScript的垃圾回收機制生效。在Javascript中,如果一個對象不再被引用,那么這個對象就會被GC回收。如果兩個對象互相引用,而不再被第3者所引用,那么這兩個互相引用的對象也會被回收。因為函數a被b引用,a又被c引用。這樣函數a和b才不會被回收。

4.閉包有什么作用?

我認為閉包的主要作用有兩點:
1.保持變量常駐內存,不被回收。
2.實現私有的方法和屬性,禁止外部訪問。

第一點很好理解,比如上面的例子中i就會常駐內存,每次執行c函數都會得到i的值。這種情況很常見,比如游戲中的的的分數等。

第二點是閉包最重要的用處,還是以上面的例子來說。i是函數a的局部變量,如果想修改i的值,只有調用函數b。其他外部函數是無法訪問到變量i的,這樣就保證了變量i的安全。

5.閉包的缺點

事物都有兩面性,閉包在帶來方便的同時也有一些弊端。

因為閉包函數會使變量常駐內存,如果使用不當。比如在循環中使用閉包,有可能導致內存壓力過大。

在IE中會導致內存泄漏,這是IE的bug并不是閉包的問題。

6.我的觀點

我猜測閉包是JavaScript在設計之初未曾想到過的用法,如果業務中沒有強烈的需求,盡量不要使用閉包。

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

推薦閱讀更多精彩內容

  • 閉包(closure)是Javascript語言的一個難點,也是它的特色,很多高級應用都要依靠閉包實現。 一、變量...
    zock閱讀 1,078評論 2 6
  • 官方中文版原文鏈接 感謝社區中各位的大力支持,譯者再次奉上一點點福利:阿里云產品券,享受所有官網優惠,并抽取幸運大...
    HetfieldJoe閱讀 5,622評論 16 88
  • 閉包: 官方”的解釋是:閉包是一個擁有許多變量和綁定了這些變量的環境的表達式(通常是一個函數),因而這些變量也是該...
    小裁縫sun閱讀 629評論 0 5
  • 你在遠方 在那人心上作案 肆無忌憚的犯罪 但更像是自衛 無心過錯 罪行于你輕如鴻毛 路人看到你對那人動粗 對那人辱...
    樹來閱讀 342評論 1 3
  • 打開簡書這個軟件,第一次接觸,但很喜歡,也很喜歡看里面大家發表的一些文章,可以自己寫東西。雖然我寫作談不上什么水平...
    墨守成香閱讀 107評論 1 1