JS 閉包(Closure)

JavaScript 變量可以是局部變量全局變量私有變量可以用到閉包。

簡單點(diǎn)說閉包就是JS中用來實(shí)現(xiàn)私有變量這一特性的特殊結(jié)構(gòu),從外部讀取局部變量。

全局變量:

函數(shù)可以訪問?由函數(shù)內(nèi)部定義的變量,如:

function myFunction() {
    var a = 4;
    return a * a;
}

函數(shù)也可以訪問函數(shù)外部定義的變量,如:

var a = 4;
function myFunction() {
    return a * a;
}

后面一個(gè)實(shí)例中, a 是一個(gè) 全局 變量。
在web頁面中全局變量屬于 window 對(duì)象。
全局變量可應(yīng)用于頁面上的所有腳本。
在第一個(gè)實(shí)例中, a 是一個(gè) 局部 變量。
局部變量只能用于定義它函數(shù)內(nèi)部。對(duì)于其他的函數(shù)或腳本代碼是不可用的。
全局和局部變量即便名稱相同,它們也是兩個(gè)不同的變量。修改其中一個(gè),不會(huì)影響另一個(gè)的值。

變量生命周期

全局變量的作用域是全局性的,即在整個(gè)JavaScript程序中,全局變量處處都在。
而在函數(shù)內(nèi)部聲明的變量,只在函數(shù)內(nèi)部起作用。這些變量是局部變量,作用域是局部性的;函數(shù)的參數(shù)也是局部性的,只在函數(shù)內(nèi)部起作用。下面我用用一個(gè)經(jīng)典案例——計(jì)數(shù)器困境來詳細(xì)分析。

計(jì)數(shù)器困境

設(shè)想下如果你想統(tǒng)計(jì)一些數(shù)值,且該計(jì)數(shù)器在所有函數(shù)中都是可用的。
你可以使用全局變量,函數(shù)設(shè)置計(jì)數(shù)器遞增:

var counter = 0;
function add() {
   return counter += 1;
}
add();
add();
add();
// 計(jì)數(shù)器現(xiàn)在為 3

計(jì)數(shù)器數(shù)值在執(zhí)行 add() 函數(shù)時(shí)發(fā)生變化。
但問題來了,頁面上的任何腳本都能改變計(jì)數(shù)器,即便沒有調(diào)用 add() 函數(shù)。
如果我在函數(shù)內(nèi)聲明計(jì)數(shù)器,如果沒有調(diào)用函數(shù)將無法修改計(jì)數(shù)器的值:

function add() {
    var counter = 0;
    counter += 1;
}
add();
add();
add();
// 本意是想輸出 3, 但事與愿違,輸出的都是 1 !

以上代碼將無法正確輸出,每次我調(diào)用 add() 函數(shù),計(jì)數(shù)器都會(huì)設(shè)置為 1。
JavaScript 內(nèi)嵌函數(shù)可以解決該問題。

JavaScript 內(nèi)嵌函數(shù)

所有函數(shù)都能訪問全局變量。
實(shí)際上,在 JavaScript 中,所有函數(shù)都能訪問它們上一層的作用域。
JavaScript 支持嵌套函數(shù)。嵌套函數(shù)可以訪問上一層的函數(shù)變量。
該實(shí)例中,內(nèi)嵌函數(shù) plus() 可以訪問父函數(shù)的 counter 變量:

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
}

如果我們能在外部訪問 plus() 函數(shù),這樣就能解決計(jì)數(shù)器的困境。
我們同樣需要確保 counter = 0 只執(zhí)行一次。(這個(gè)確保只執(zhí)行一次是關(guān)鍵)
我們需要閉包。

JavaScript 閉包

還記得函數(shù)自我調(diào)用嗎?該函數(shù)會(huì)做什么?

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
add();
add();
add();
// 計(jì)數(shù)器為 3

變量 add 指定了函數(shù)自我調(diào)用的返回字值。
自我調(diào)用函數(shù)只執(zhí)行一次。設(shè)置計(jì)數(shù)器為 0。并返回函數(shù)表達(dá)式。
add變量可以作為一個(gè)函數(shù)使用。非常棒的部分是它可以訪問函數(shù)上一層作用域的計(jì)數(shù)器。
這個(gè)叫作 JavaScript 閉包。它使得函數(shù)擁有私有變量變成可能。
計(jì)數(shù)器受匿名函數(shù)的作用域保護(hù),只能通過 add 方法修改。
閉包是可訪問上一層函數(shù)作用域里變量的函數(shù),即便上一層函數(shù)已經(jīng)關(guān)閉。

閉包結(jié)構(gòu)總結(jié)

通過上面的例子我們大概知道了閉包是用來做什么的,那么最后做一個(gè)概要總結(jié)。
閉包結(jié)構(gòu)的核心在于,在一個(gè)函數(shù)A內(nèi)部再定義一個(gè)內(nèi)嵌函數(shù)B,在函數(shù)B的方法體內(nèi)引用函數(shù)A的變量,然后使用return將函數(shù)B返回給最外層的調(diào)用者,這樣的話最外層的作用域/上下文只能通過函數(shù)B引用函數(shù)A定義的變量,通過這樣的機(jī)構(gòu)就使函數(shù)A定義的變量成為了私有變量。

我按我的理解總結(jié)下JavaScript閉包吧:
閉包就是一個(gè)函數(shù)引用另一個(gè)函數(shù)的變量,因?yàn)樽兞勘灰弥圆粫?huì)被回收,因此可以用來封裝一個(gè)私有變量。這是優(yōu)點(diǎn)也是缺點(diǎn),不必要的閉包只會(huì)增加內(nèi)存消耗。
或者說閉包就是子函數(shù)可以使用父函數(shù)的局部變量,還有父函數(shù)的參數(shù)。

參考資料:
學(xué)習(xí)Javascript閉包
Javascript閉包——懂不懂由你,反正我是懂了
帶你一分鐘理解閉包--js面向?qū)ο缶幊?/a>

  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,333評(píng)論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,491評(píng)論 3 416
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,263評(píng)論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,946評(píng)論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,708評(píng)論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,186評(píng)論 1 324
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,255評(píng)論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,409評(píng)論 0 288
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,939評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,774評(píng)論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,976評(píng)論 1 369
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,518評(píng)論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,209評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,641評(píng)論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,872評(píng)論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,650評(píng)論 3 391
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,958評(píng)論 2 373

推薦閱讀更多精彩內(nèi)容

  • 作用域和閉包是 JavaScript 最重要的概念之一,想要進(jìn)一步學(xué)習(xí) JavaScript,就必須理解 Java...
    劼哥stone閱讀 1,186評(píng)論 1 13
  • 本文引用https://zhuanlan.zhihu.com/p/25655417博客 著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載...
    BeierYao閱讀 341評(píng)論 0 0
  • 談起閉包,它可是JavaScript兩個(gè)核心技術(shù)之一(異步和閉包),在面試以及實(shí)際應(yīng)用當(dāng)中,我們都離不開它們,甚至...
    sponing閱讀 699評(píng)論 0 7
  • 皚皚白雪飄揚(yáng)歇斯底里侵我心腸心如明鏡忘凄涼天地茫茫似有朝愁暮落悲莫要往事擱心房回首昨日泛惆悵在一方彼此相安毋幻想唯...
    追夢(mèng)赤子心2017閱讀 162評(píng)論 0 0
  • 本系列基于官方wiki進(jìn)行翻譯,個(gè)別地方的闡述會(huì)加入個(gè)人的理解,不對(duì)的地方,歡迎指正。 用戶手冊(cè) Guava項(xiàng)目包...
    JohnShen閱讀 1,986評(píng)論 0 2