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