簡短幾句 通俗解釋javascript的閉包
更新時(shí)間：2011年01月17日 22:37:15 作者：
什么是閉包呢？閉包就是函數(shù)實(shí)例執(zhí)行過程中動(dòng)態(tài)產(chǎn)生一個(gè)沒有被釋放資源的棧區(qū)，也是一個(gè)預(yù)執(zhí)行的過程。
何謂沒有被釋放資源的棧區(qū)和預(yù)執(zhí)行的過程，用一個(gè)最常見的示例來解釋：
比方現(xiàn)在我們有一個(gè)ul，下面有很多個(gè)li，需要遍歷他們?yōu)樗麄兘壎▎螕羰录?，并在點(diǎn)擊后將當(dāng)前下標(biāo)傳遞給另外一個(gè)function來進(jìn)行額外的處理：
for(var i=0; i<agroup.length; i++) {
agroup[i].onclick = function() {
handler(i);
}
}
執(zhí)行結(jié)果顯而易見對吧?在handler中，獲取傳遞過去的參數(shù)i，你看到的將全部是最大的下標(biāo)，這個(gè)時(shí)候，我們通常用下面的辦法解決：
for(var i=0; i<agroup.length; i++) {
agroup[i].i = i
agroup[i].onclick = function() {
handler(this.i);
}
}
那么在這里，先講一下this的指向問題，從通常來說，javascript中的this是指向當(dāng)前引用他的對象的。上面我們相當(dāng)為this新增了一個(gè)為i的屬性，他的值就是當(dāng)前的下標(biāo)值。
那么用閉包的方式如何解決這個(gè)問題？其實(shí)原理相同，我們需要預(yù)先的把i值保存起來，或叫作傳遞：
for(var i=0; i<agroup.length; i++) {
agroup[i].onclick = function(index) {
return function() {
handler(index);
}
}(i);
}
這個(gè)時(shí)候你會(huì)得到正確的下標(biāo)，這樣做與增加i屬性有何雷同之處？也就是他們都預(yù)先把下標(biāo)i值傳遞或是儲存起來。在上面的演示中，預(yù)執(zhí)行onclick所引用的函數(shù)，而這個(gè)
函數(shù)當(dāng)中返回了一個(gè)內(nèi)嵌函數(shù)，形成一個(gè)沒有被釋放資源的棧區(qū)，并在預(yù)執(zhí)行的時(shí)候?qū)值以參數(shù)的形式傳入這個(gè)作用域（解釋能力有問題，這句解釋不知道是否準(zhǔn)確，歡迎磚拍）。
綜上所述，閉包的作用通常是改變作用域或預(yù)執(zhí)行。應(yīng)該看官很明白了，上面?zhèn)€出的示例很局限，閉包的應(yīng)用范圍是很廣的，了解其因果，才能靈活的使用它。
auntion 2011-11-15
mail Auntion@gmail.com
QQ 82874972
原創(chuàng)文章，請尊重打字的辛勞和作者的權(quán)益，轉(zhuǎn)載時(shí)請不要?jiǎng)h除這里的作者信息。
比方現(xiàn)在我們有一個(gè)ul，下面有很多個(gè)li，需要遍歷他們?yōu)樗麄兘壎▎螕羰录?，并在點(diǎn)擊后將當(dāng)前下標(biāo)傳遞給另外一個(gè)function來進(jìn)行額外的處理：
復(fù)制代碼 代碼如下:
for(var i=0; i<agroup.length; i++) {
agroup[i].onclick = function() {
handler(i);
}
}
執(zhí)行結(jié)果顯而易見對吧?在handler中，獲取傳遞過去的參數(shù)i，你看到的將全部是最大的下標(biāo)，這個(gè)時(shí)候，我們通常用下面的辦法解決：
復(fù)制代碼 代碼如下:
for(var i=0; i<agroup.length; i++) {
agroup[i].i = i
agroup[i].onclick = function() {
handler(this.i);
}
}
那么在這里，先講一下this的指向問題，從通常來說，javascript中的this是指向當(dāng)前引用他的對象的。上面我們相當(dāng)為this新增了一個(gè)為i的屬性，他的值就是當(dāng)前的下標(biāo)值。
那么用閉包的方式如何解決這個(gè)問題？其實(shí)原理相同，我們需要預(yù)先的把i值保存起來，或叫作傳遞：
復(fù)制代碼 代碼如下:
for(var i=0; i<agroup.length; i++) {
agroup[i].onclick = function(index) {
return function() {
handler(index);
}
}(i);
}
這個(gè)時(shí)候你會(huì)得到正確的下標(biāo)，這樣做與增加i屬性有何雷同之處？也就是他們都預(yù)先把下標(biāo)i值傳遞或是儲存起來。在上面的演示中，預(yù)執(zhí)行onclick所引用的函數(shù)，而這個(gè)
函數(shù)當(dāng)中返回了一個(gè)內(nèi)嵌函數(shù)，形成一個(gè)沒有被釋放資源的棧區(qū)，并在預(yù)執(zhí)行的時(shí)候?qū)值以參數(shù)的形式傳入這個(gè)作用域（解釋能力有問題，這句解釋不知道是否準(zhǔn)確，歡迎磚拍）。
綜上所述，閉包的作用通常是改變作用域或預(yù)執(zhí)行。應(yīng)該看官很明白了，上面?zhèn)€出的示例很局限，閉包的應(yīng)用范圍是很廣的，了解其因果，才能靈活的使用它。
auntion 2011-11-15
mail Auntion@gmail.com
QQ 82874972
原創(chuàng)文章，請尊重打字的辛勞和作者的權(quán)益，轉(zhuǎn)載時(shí)請不要?jiǎng)h除這里的作者信息。
相關(guān)文章
JS 在數(shù)組插入字符的實(shí)現(xiàn)代碼(可參考JavaScript splice() 方法)
在數(shù)組插入字符，添加數(shù)組，刪除數(shù)組可以用slice自帶的方法。操作比較方便，這個(gè)代碼是作者通過push與shift方法實(shí)現(xiàn)，只能是個(gè)思路，但不推薦這樣的方法。2009-12-12
本篇文章主要介紹了Webpack實(shí)戰(zhàn)加載SVG的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
js中一個(gè)函數(shù)獲取另一個(gè)函數(shù)返回值問題探討
在本文將為大家詳細(xì)探討下js中一個(gè)函數(shù)獲取另一個(gè)函數(shù)返回值問題，比較模糊的朋友可以學(xué)習(xí)下哦2013-11-11
本文主要分享一個(gè)簡易的上傳頭像示例以及其大致流程、實(shí)現(xiàn)過程中需要注意的事項(xiàng)。具有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
javascript實(shí)現(xiàn)數(shù)字時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)數(shù)字時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
一分鐘學(xué)會(huì)JavaScript中的try-catch
這篇文章主要給大家介紹了關(guān)于如何通過一分鐘學(xué)會(huì)JavaScript中try-catch的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
JavaScript String 對象常用方法總結(jié)
下面小編就為大家?guī)硪黄狫avaScript String 對象常用方法總結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-04-04
Javascript實(shí)現(xiàn)計(jì)算個(gè)人所得稅
用javascript腳本語言編寫一個(gè)“個(gè)人所得稅計(jì)算器”？計(jì)算公式：所得稅=（月收入-起征額）*10%；重填就是全部清空；十分的實(shí)用，有需要的小伙伴可以參考下。2015-05-05
這篇文章主要給大家介紹了關(guān)于uniapp頁面回到頂部兩種實(shí)現(xiàn)方法的相關(guān)資料,在uniapp中要實(shí)現(xiàn)回到頂部的效果有兩種方法實(shí)現(xiàn),文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-08-08
js原生之焦點(diǎn)圖轉(zhuǎn)換加定時(shí)器實(shí)例
本文主要分享了在jQuery之焦點(diǎn)圖轉(zhuǎn)換-左右的基礎(chǔ)上，將jQuery代碼改成js原生，并添加定時(shí)器（setInterval()和clearInterval()）的實(shí)例代碼。需要的朋友可以參考借鑒2016-12-12