閉包那些事

CloudDeveloper 發(fā)布于2019-08-22 17:58 / 1006人閱讀

摘要：說源頭說起閉包的產(chǎn)生由于變量作用域鏈引起的由詞法作用域?qū)е隆ｉ]包其實(shí)就是個稱呼，重要的是在這種場景下內(nèi)部函數(shù)可以調(diào)用外部函數(shù)的變量，而這正是因?yàn)樵~法作用域鏈。當(dāng)閉包產(chǎn)生，在局部函數(shù)未被釋放之前，被引用外部函數(shù)的變量就無法被釋放。

今天在面試的時(shí)候被問到閉包，本身個人感覺還是挺懂的，一時(shí)半會突然又懵逼不知道從何說起(WTF). 好吧那我接下來在重新記錄下吧:

其他時(shí)效優(yōu)質(zhì)文章，歡迎查閱

專業(yè)名詞解釋:

在計(jì)算機(jī)中，閉包指引用了自由變量的函數(shù)。這個被引用的自由變量將和這個函數(shù)一同存在。

局限自定義: 在Javascript 中子函數(shù)中使用了其父函數(shù)或者外層函數(shù)的變量等就產(chǎn)生了一個閉包。這時(shí)外層變量的值能被子函數(shù)使用且外層變量在子函數(shù)未銷毀之前一直被分配不會被釋放。

說源頭說起:

閉包的產(chǎn)生由于變量作用域鏈引起的(由詞法作用域導(dǎo)致)。
?

JavaScript作用域:

在ES5及之前的語言規(guī)范中作用域分3種:

全局作用域

局部(函數(shù)作用域)

eval作用域。

[注意:沒有塊級作用域]

在函數(shù)中定義的變量，就屬于局部作用域，且只對函數(shù)范圍內(nèi)其他表達(dá)式可見。
而函數(shù)內(nèi)部又可以使用父函數(shù)中的變量這就是由于作用域鏈，當(dāng)JavaScript查找與變量關(guān)聯(lián)的值時(shí)，會遵循一個查找鏈。這個鏈?zhǔn)腔谧饔糜虻膶哟谓Y(jié)構(gòu)。如下代碼:

var a = "global variable"; 
( function () { 
    console.log(a); 
    var fn = function () { 
        var a = "local variable" 
        console.log(a);
    }     
    fn(); 
})()

//輸出
//global variable
//local variable

我們在window全局對象下聲明了變量a，隨后調(diào)用了一個立即執(zhí)行函數(shù)，其中向控制臺直接打印變量a，由于立即執(zhí)行函數(shù)沒有聲明局部變量a所以導(dǎo)致JavaScript向其作用域鏈繼續(xù)查找接著就在window對象中找到a變量并打印出它的值"global variable"。接著這個立即執(zhí)行函數(shù)聲明了一個局部函數(shù)變量再調(diào)用它，在這個函數(shù)變量中首先聲明了一個局部變量a然后在向控制臺輸出a得值。JavaScript在執(zhí)行時(shí)由于在fn函數(shù)作用域內(nèi)部查找到了變量a就直接使用變量a的值所以打印出了local variable。

值得注意的是:

這里其實(shí)有2個閉包環(huán)境一個是window對象和立即執(zhí)行函數(shù)所創(chuàng)建的閉包;另一個是立即執(zhí)行函數(shù)和其內(nèi)部聲明的函數(shù)變量fn創(chuàng)建的閉包。

閉包其實(shí)就是個稱呼，重要的是在這種場景下內(nèi)部函數(shù)可以調(diào)用外部函數(shù)的變量，而這正是因?yàn)樵~法作用域鏈。

當(dāng)閉包產(chǎn)生，在局部函數(shù)未被釋放之前，被引用外部函數(shù)的變量就無法被釋放。

清楚作用域的含義了嗎???

那么我們剛剛說的“詞法“作用域又是什么。
其實(shí)詞法就是指代環(huán)境:由于函數(shù)決定作用域，并且函數(shù)是一等公民可以直接用來參數(shù)傳遞等。那么作用域鏈?zhǔn)窃鯓觼泶_定的呢: 下面的話背熟了:
作用域鏈?zhǔn)歉鶕?jù)函數(shù)定義時(shí)候的位置確定的而不是在調(diào)用時(shí)。--這就是“詞法”作用域

如果你還不懂閉包我TM。。。

最后我們來看看幾個老生長談的基本栗子:

[閉包的影響]對一些li綁定點(diǎn)擊事件并打印其索引，對比2斷代碼不解釋:

var liListlength = 3; 
for(var i=0;i li")[i]; 
    ele.addEventListener("click",function(){ 
        alert("index is :" + i); 
    })         
}

var liListlength = 3; 
for(var i=0;i li")[i]; 
    ele.addEventListener("click",(function(i){ 
        return function(){ 
            alert("index is :" + i); 
        } 
    })(i))     
}

[閉包的妙用]模擬封裝

我們可以運(yùn)用閉包模擬模塊的實(shí)現(xiàn)，即我們可以只暴露方法接口隱藏局部變量，具體如下:

var countMoudle = (function(){ 
var _count = 0; 

var plus = function(){ 
? _count++; 
}; 

var minus = function(){ 
? _count--; 
}; 

var print = function(){ 
    console.log(_count); 
} 

return { 
? plus: plus, 
? minus: minus, 
? print: print 

}; 
})();

countMoudle.print()  //0
countMoudle.plus()   
countMoudle.print()  //1
countMoudle.minus()
countMoudle.print()  //0

此時(shí)我們只暴露出了方法名而沒有暴露出變量屬性，這時(shí)要對變量的修改只有通過接口方法調(diào)用。

最后

如有任何問題和建議歡迎發(fā)送至郵箱討論：
編寫不易，若您覺得對您有幫助，歡迎打賞

微信：

支付寶：