深入理解JavaScript（二）：由一道題來(lái)思考閉包

曹金海發(fā)布于2019-08-26 10:32 / 1300人閱讀

摘要：中所有的事件綁定都是異步編程當(dāng)前這件事件沒(méi)有徹底完成，不再等待，繼續(xù)執(zhí)行下面的任務(wù)當(dāng)綁定事件后，不需要等待執(zhí)行，繼續(xù)執(zhí)行下一個(gè)循環(huán)任務(wù)，所以當(dāng)我們點(diǎn)擊執(zhí)行方法的時(shí)候，循環(huán)早已結(jié)束即是最后。

概念

閉包就是指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)

    
    
    
    
    點(diǎn)擊li標(biāo)簽彈出對(duì)應(yīng)數(shù)字
    
    
    
        0
        1
        2
        3

如上題，最為常見(jiàn)的一個(gè)例子，這里解釋由這道題引出的js知識(shí)點(diǎn)，如上我們知道在瀏覽器運(yùn)行無(wú)論點(diǎn)擊哪個(gè)li標(biāo)簽都是彈出3,首先來(lái)理解為什么會(huì)彈出3。

程序通過(guò)for循環(huán)給每個(gè)li標(biāo)簽綁定了事件，然后通過(guò)點(diǎn)擊li標(biāo)簽觸發(fā)方法，即執(zhí)行alert(i)。js中有個(gè)作用域鏈查找機(jī)制，首先會(huì)在onclick返回的函數(shù)作用域查找i變量的值，找不到則往上一層找i，上一層即是window全局作用域，即找到全局變量i，即for循環(huán)定義的i。

注意for循環(huán)的i并不是私有變量，而是全局變量。

js中所有的事件綁定都是異步編程（當(dāng)前這件事件沒(méi)有徹底完成，不再等待，繼續(xù)執(zhí)行下面的任務(wù)）

當(dāng)綁定onclick事件后，不需要等待執(zhí)行，繼續(xù)執(zhí)行下一個(gè)循環(huán)任務(wù)，所以當(dāng)我們點(diǎn)擊執(zhí)行方法的時(shí)候，循環(huán)早已結(jié)束,即是最后i=3。故程序執(zhí)行后全局變量i被循環(huán)執(zhí)行后賦值為最終的3，所以當(dāng)點(diǎn)擊的時(shí)候，外層循環(huán)已經(jīng)結(jié)束，頁(yè)面加載完成預(yù)示著js代碼都已經(jīng)執(zhí)行完成，即執(zhí)行alert(i)時(shí)，由于i不是私有變量，便會(huì)找到上一級(jí)window作用域全局的i，所以無(wú)論點(diǎn)擊哪個(gè)li標(biāo)簽都是彈出3

為什么要用閉包

那么，解決這個(gè)問(wèn)題的緣由，在于i每次在頁(yè)面加載完就賦值為3，alert(i)的時(shí)候總是找到全局變量i。在ES5傳統(tǒng)語(yǔ)法中，能形成作用域的只有全局和函數(shù)，現(xiàn)在每次i找的都是全局，那么要保住i的值只能在全局和onclick返回函數(shù)的作用域中間再加一個(gè)小的私有作用域，即是大的作用域外再加一個(gè)小的作用域，這樣i往上一層作用域查找時(shí)，就會(huì)獲取小作用域的i的值，而不會(huì)去獲取全局變量的i值。

這個(gè)思路解決問(wèn)題就需要引入閉包，在這個(gè)理解上閉包是指函數(shù)變量可以保存在函數(shù)作用域內(nèi)，因此看起來(lái)是函數(shù)將變量“包裹”了起來(lái)。于是，代碼改成：

for(var i = 0;i < list.length;i++){
    list[i].onclick = (function(n){//形參n
        //=>讓自執(zhí)行函數(shù)執(zhí)行,把執(zhí)行的返回值(return)賦值給onclick
        //（此處onclick綁定的是返回的小函數(shù)，點(diǎn)擊的時(shí)候執(zhí)行的是小函數(shù)）,
        // 自執(zhí)行函數(shù)在給事件賦值的時(shí)候就已經(jīng)執(zhí)行了
        // 自執(zhí)行函數(shù)形成一個(gè)私有作用域
        var i = n;
        return function(){
            alert(i);
        }
    })(i);//傳入實(shí)參i
}

循環(huán)三次，形成三個(gè)不銷毀的私有作用域（自執(zhí)行函數(shù)執(zhí)行），而每一個(gè)不銷毀的棧內(nèi)存中都存儲(chǔ)了一個(gè)私有變量i，而這個(gè)值分別是每一次執(zhí)行傳遞進(jìn)來(lái)的全局i的值（也就是：第一個(gè)不銷毀的作用域存儲(chǔ)的是0，第二個(gè)是1，第三個(gè)是2，第四個(gè)是3）；當(dāng)點(diǎn)擊的時(shí)候，執(zhí)行返回的小函數(shù)，遇到變量i，向它自己的上級(jí)作用域查找。這樣就達(dá)到了我們需要的效果，這種閉包實(shí)現(xiàn)，也可以有另一種寫法。

/*原理同法二都是形成三個(gè)不銷毀的私有作用域,分別存儲(chǔ)需要的索引值*/
for(var i = 0;i < list.length;i++){
    (function(n){
        list[n].onclick = function(){
            alert(n);
        } 
    })(i)
}

對(duì)于初始的代碼，如果說(shuō)為什么不能實(shí)現(xiàn)，那原因就可歸納為：

1.執(zhí)行方法,形成一個(gè)私有的棧內(nèi)存,遇到變量i,i不是私有變量,向上一級(jí)作用域查找（上級(jí)作用域window）
2.所有的事件綁定都是異步編程,綁定事件后,不需要等待執(zhí)行,繼續(xù)執(zhí)行下一個(gè)循環(huán)任務(wù),所以當(dāng)我們點(diǎn)擊執(zhí)行方法的時(shí)候,循環(huán)早已結(jié)束（讓全局的i等于循環(huán)最后的結(jié)果3）

ES6語(yǔ)法的解決方式

在ES6中，解決這種問(wèn)題只需要一個(gè)let變量，ES6中才有塊級(jí)作用域（類似于私有作用域）的概念

for(let i = 0;i < list.length;i++){
    list[i].onclick = function(){
        alert(i);
    }
}

閉包對(duì)內(nèi)存的影響

從上面可知，每次for都會(huì)形成一個(gè)私有作用域，每個(gè)都里面保存的變量i的值，程序運(yùn)行后這些作用域并不會(huì)被銷毀，所以由于閉包會(huì)攜帶包含它的函數(shù)的作用域，所以會(huì)比其他函數(shù)占用更多內(nèi)容，過(guò)度使用閉包會(huì)導(dǎo)致內(nèi)存占用過(guò)多。

在真實(shí)項(xiàng)目中為了保證JS的性能（堆棧內(nèi)存的性能優(yōu)化），應(yīng)該盡可能的減少閉包的使用（不銷毀的堆棧內(nèi)存是耗性能的）

堆內(nèi)存和棧內(nèi)存的釋放

這里又要提到一個(gè)知識(shí)點(diǎn)，js中存儲(chǔ)方式的分類：

JS中的內(nèi)存分為堆內(nèi)存和棧內(nèi)存
堆內(nèi)存：存儲(chǔ)引用數(shù)據(jù)類型值（對(duì)象：鍵值對(duì)  函數(shù)：代碼字符串）
棧內(nèi)存：提供JS代碼執(zhí)行的環(huán)境和存儲(chǔ)基本類型值

粗暴理解var定義的變量存在棧內(nèi)存中，如for循環(huán)中的i是存在棧內(nèi)存中的；而函數(shù)，它是存在堆內(nèi)存中

一般情況下，當(dāng)函數(shù)執(zhí)行完成，所形成的私有作用域（棧內(nèi)存）都會(huì)自動(dòng)釋放掉（在棧內(nèi)存中存儲(chǔ)的值也都會(huì)釋放掉），那為什么閉包的棧內(nèi)存不會(huì)被自動(dòng)釋放掉，在js中也有特殊不被銷毀的情況：

1.函數(shù)執(zhí)行完成，當(dāng)前形成的棧內(nèi)存中，某些內(nèi)容被棧內(nèi)存以外的變量占用了，此時(shí)棧內(nèi)存不能釋放（一旦釋放外面找不到原有的內(nèi)容了）
  2.全局棧內(nèi)存只有在頁(yè)面關(guān)閉的時(shí)候才會(huì)被釋放掉

閉包則是屬于第一種情況，onclick函數(shù)形成的棧內(nèi)存，被小函數(shù)【alert(i)，i找到onclick作用域獲取i值】占用了onclick函數(shù)的棧內(nèi)存（變量i是存在棧內(nèi)存中），故棧內(nèi)存不能被釋放，所以才會(huì)說(shuō)閉包過(guò)度使用容易導(dǎo)致內(nèi)存被占用過(guò)多，因?yàn)椴粫?huì)自動(dòng)釋放內(nèi)存。

堆內(nèi)存的釋放

堆內(nèi)存讓所有引用堆內(nèi)存空間地址的變量賦值為null即可（沒(méi)有變量占用這個(gè)堆內(nèi)存了，瀏覽器會(huì)在空閑的時(shí)候把它釋放掉）

GPU云服務(wù)器云服務(wù)器深入理解javascript js閉包的理解深入理解系列深入理解linux

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106351.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

曹金海

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

ZJI：新上香港葵灣4C站群服務(wù)器，4C段236個(gè)IP，八折優(yōu)惠月付1400元起

閱讀 3144·2021-10-12 10:20
阿里云服務(wù)器爆品秒殺：新用戶低至0.05折起

閱讀 2881·2021-09-27 13:56
大型項(xiàng)目源碼集合「GitHub 熱點(diǎn)速覽 v.21.39」

閱讀 837·2021-09-27 13:36
基于Opencv的手勢(shì)識(shí)別

閱讀 1462·2021-09-26 09:46
前端開(kāi)發(fā)：那些我遇到的bug (持續(xù)更新)

閱讀 2467·2019-08-30 14:02
CSS:關(guān)于元素高度與寬度的討論系列文章（二）

閱讀 2715·2019-08-28 18:14
深入理解JavaScript（二）：由一道題來(lái)思考閉包

閱讀 1301·2019-08-26 10:32
Vue.js SSR 內(nèi)容總結(jié)

閱讀 1731·2019-08-23 18:25

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

深入理解JavaScript（二）：由一道題來(lái)思考閉包

相關(guān)文章

**【進(jìn)階1-4期】JavaScript深入之帶你走進(jìn)內(nèi)存機(jī)制**

JavaScript深入之執(zhí)行上下文

web前端面試題一

程序語(yǔ)言

程序語(yǔ)言

發(fā)表評(píng)論

0條評(píng)論

曹金海

男|高級(jí)講師

TA的文章

ZJI：新上香港葵灣4C站群服務(wù)器，4C段236個(gè)IP，八折優(yōu)惠月付1400元起

阿里云服務(wù)器爆品秒殺：新用戶低至0.05折起

大型項(xiàng)目源碼集合「GitHub 熱點(diǎn)速覽 v.21.39」

基于Opencv的手勢(shì)識(shí)別

前端開(kāi)發(fā)：那些我遇到的bug (持續(xù)更新)

CSS:關(guān)于元素高度與寬度的討論系列文章（二）