正在學(xué)習(xí)初學(xué)前端小伙伴，會(huì)感覺(jué) HTML 和 CSS 太簡(jiǎn)單了，沒(méi)什么挑戰(zhàn)性。那是你沒(méi)有學(xué)過(guò) JS ，JS 中太多的概念初期學(xué)習(xí)的時(shí)候也是很懵逼的，比如 this、原型鏈、閉包等，即是重點(diǎn)，又是難點(diǎn)。但是你懂了之后會(huì)發(fā)現(xiàn)很簡(jiǎn)單，很好理解。

因?yàn)樾÷故罴偃ッ嬖?，每?chǎng)面試基本都是必問(wèn)的，不僅要知道理論，還要問(wèn)你在實(shí)際項(xiàng)目中的實(shí)踐，這部分內(nèi)容很多人常常在實(shí)戰(zhàn)中忽略掉。

今天的內(nèi)容，就是 JS 中的一個(gè)重點(diǎn)，也是面試的必考點(diǎn)，項(xiàng)目中也經(jīng)常使用到，那就是有請(qǐng)我們神圣的"閉包"出場(chǎng)。

你可能沒(méi)聽(tīng)說(shuō)過(guò)這個(gè)名詞，也可能聽(tīng)說(shuō)了但是不理解它，不知道怎么使用它，那咱們從零和小鹿用動(dòng)畫(huà)把“閉包”的概念弄的明明白白。

思維導(dǎo)圖

一、什么是閉包?

學(xué)習(xí)一個(gè)陌生的概念，我們首先要去明白是什么?也就是閉包是什么?要想完全掌握閉包，一定要清楚函數(shù)作用域、內(nèi)存回收機(jī)制、作用域繼承。我們就簡(jiǎn)單講一下這幾個(gè)概念。

1. 函數(shù)作用域

作用域的概念，形象描述的話(huà)，可以認(rèn)為它是一個(gè)封閉的空間，只允許在這個(gè)封閉的空間內(nèi)進(jìn)行一些操作，也將這個(gè)封閉空間稱(chēng)為私有作用域。在 JS 中，一個(gè)函數(shù)的執(zhí)行就會(huì)在內(nèi)存中創(chuàng)建一個(gè)私有作用域——封閉的空間。

比如在函數(shù)中定義一個(gè)變量，只能在函數(shù)這個(gè)私有作用域中使用(也就是封閉空間)。只要超出了這個(gè)作用域，就找不到該變量了。

而且函數(shù)執(zhí)行完成后，這個(gè)私有作用域(封閉的空間)就會(huì)銷(xiāo)毀。有一種情況它是不會(huì)銷(xiāo)毀的，那就是“閉包”，后邊會(huì)講到。

2. 內(nèi)存回收機(jī)制

內(nèi)存回收機(jī)制就是不在用到的內(nèi)存，我們系統(tǒng)就自動(dòng)進(jìn)行回收從而清理出空間供其他程序使用。那回收的規(guī)則是什么?

內(nèi)部函數(shù)引用著外部的函數(shù)的變量，外部的函數(shù)盡管執(zhí)行完畢，作用域也不會(huì)銷(xiāo)毀。從而形成了一種不銷(xiāo)毀的私有作用域。

某一變量或者對(duì)象被引用著，因此在回收的時(shí)候不會(huì)釋放它，因?yàn)楸灰么碇皇褂?，回收器不?huì)對(duì)正在引用的變量或?qū)ο蠡厥盏摹?/p>

3. 作用域繼承

所謂的作用域繼承，就像是兒子可以繼承父親的財(cái)產(chǎn)一樣。比如小鹿這里有一個(gè)大的盒子作為一個(gè)父級(jí)的作用域，然后在這個(gè)大的盒子里邊放一個(gè)小的盒子，作為子作用域。我們規(guī)定可以在小盒子中獲取到大盒子中的東西，大盒子不能獲取小盒子里的東西就稱(chēng)為作用域繼承。

在 JS 中，道理是一樣的，在一個(gè)函數(shù)里邊我們?cè)俾暶饕粋€(gè)函數(shù)，內(nèi)部函數(shù)可以訪(fǎng)問(wèn)外部函數(shù)作用域的變量，而外部的函數(shù)不能獲取到內(nèi)部函數(shù)的作用域變量。

那好，上邊的這幾個(gè)概念理解了之后，什么是閉包對(duì)你來(lái)說(shuō)已經(jīng)不是什么問(wèn)題。

大白話(huà)說(shuō)什么是閉包，那就是在一個(gè)函數(shù)里邊再定義一個(gè)函數(shù)。這個(gè)內(nèi)部函數(shù)一直保持有對(duì)外部函數(shù)中作用域的訪(fǎng)問(wèn)權(quán)限(小盒子一直可以有大盒子的訪(fǎng)問(wèn)權(quán)限)。

函數(shù)執(zhí)行，形成一個(gè)私有的作用域，保護(hù)里邊的私有變量不受外界的干擾，除了保護(hù)私有變量外，還可以存儲(chǔ)一些內(nèi)容，這樣的模式叫做閉包。

動(dòng)畫(huà)實(shí)現(xiàn)：

二、閉包的作用是什么?

想必你對(duì)閉包還是有點(diǎn)懵懵懂懂，沒(méi)關(guān)系，我們?cè)倮^續(xù)深入了解。閉包主要的作用是什么呢?為什么要使用閉包呢?

通過(guò)上邊對(duì)閉包的解釋?zhuān)獠亢瘮?shù) return 內(nèi)部函數(shù)，但是仍然還是可以有訪(fǎng)問(wèn)外部函數(shù)的作用域，因?yàn)橥獠恳恢北３种?。這就讓我們發(fā)現(xiàn)它的可用之處。

不是有塊作用域不銷(xiāo)毀嗎?我們可以用來(lái)保存一些內(nèi)容，還可以用來(lái)保護(hù)一些私有的變量。我們總結(jié)出閉包有兩個(gè)作用，分別為保護(hù)和保存。

三、閉包的應(yīng)用場(chǎng)景

既然我們知道閉包的作用是保存和保護(hù)，那在實(shí)際項(xiàng)目中哪里用到了呢?

1. 保護(hù)作用

團(tuán)隊(duì)開(kāi)發(fā)時(shí)，每個(gè)開(kāi)發(fā)者把自己的代碼放在一個(gè)私有的作用域中，防止相互之間的變量命名沖突;把需要提供給別人的方法，通過(guò) return 或 window.xxx 的方式暴露在全局下。

jQuery 的源碼中也是利用了這種保護(hù)機(jī)制。

2. 保存作用

選項(xiàng)卡閉包的解決方案。我們經(jīng)常在網(wǎng)頁(yè)中使用選項(xiàng)卡，但是它存在一個(gè)問(wèn)題，那就是索引引發(fā)的問(wèn)題，其實(shí)和下邊的經(jīng)典面試題問(wèn)題相同。

四、經(jīng)典的閉包面試題

循環(huán)綁定事件引發(fā)的索引什么問(wèn)題?怎么解決這種問(wèn)題?

此時(shí)運(yùn)行程序，你會(huì)得出的結(jié)果都是 len 的數(shù)值。

為什么會(huì)出現(xiàn)這種問(wèn)題，我們?nèi)绾谓鉀Q呢?

原因很簡(jiǎn)單，所有的事件綁定都是異步的，當(dāng)觸發(fā)點(diǎn)擊事件，執(zhí)行方法的時(shí)候，循環(huán)早就結(jié)束了。

我們?cè)诙嗾f(shuō)一點(diǎn)，什么是同步什么是異步?

• 同步：JS 中當(dāng)前這個(gè)任務(wù)沒(méi)有完成，下面的任務(wù)都不會(huì)執(zhí)行，只有等當(dāng)前徹底完成，才會(huì)執(zhí)行下面的任務(wù)。
• 異步：JS 中的當(dāng)前任務(wù)沒(méi)有完成，需要等一會(huì)在完成，此時(shí)我們可以繼續(xù)執(zhí)行下面的任務(wù)。

解決方案：

當(dāng)點(diǎn)擊事件執(zhí)行的時(shí)候，就會(huì)在私有作用域查找 i 的值，此時(shí)私有作用域沒(méi)有 i ，就回去全局作用域查找，此時(shí)全局作用域的 i 已經(jīng)被改變。所以說(shuō)，要?jiǎng)?chuàng)建一個(gè)私有作用域的 i 。

方法一，閉包的方式。閉包終于排上用場(chǎng)了，用來(lái)保存私有的變量。

但是閉包解決又優(yōu)點(diǎn)，也有缺點(diǎn)。優(yōu)點(diǎn)就是通過(guò)創(chuàng)建私有作用域(閉包)方式解決，循環(huán)幾次，就創(chuàng)建幾個(gè)私有作用域(閉包)，然后，每個(gè)私有作用域都有一個(gè)私有變量 i ，存的值分別是循環(huán)的值。

缺點(diǎn)是生成多個(gè)不銷(xiāo)毀的私有作用域(堆內(nèi)存)，對(duì)性能有一定的影響。

方法二，使用自定義屬性。我們給每個(gè)對(duì)象添加一個(gè)索引屬性就 OK 了。

終極解決方案，這是 ES6 中的知識(shí)，因?yàn)橹霸?JS 中是沒(méi)有塊級(jí)作用域的概念的，到了 ES6 中就有了，Let 聲明的變量就可以更好的解決上述問(wèn)題。