淺談js中的閉包
首先我們先來看一段代碼:
<a href="javascript:void(0);">111</a>
<a href="javascript:void(0);">222</a>
<a href="javacsript:void(0);">333</a>
var a=document.getElementsByTagName("a");
function b(){
for(var i=0;i<a.length;i++){
a[i].onclick=function(){
alert(i);
}
}
}
按照我們設計的初衷，應該是點擊一個a標簽就相應的彈出該標簽的序列號，即點擊第一個a就彈出0，點擊第二個就彈出1...但是事實是彈出的始終是a標簽的個數(shù)，這是什么原因呢？這個問題困擾了我很久，查閱了許多網(wǎng)上的資料還有參考書籍，大多說的似是而非，相信也有許多同學對其中原因也不甚了解，就這個問題我談談自己的理解，如有不當之處，還請批評指正。
就我個人的理解，上述函數(shù)未能達到目的的原因是，事件處理函數(shù)綁定了變量i，而該事件處理函數(shù)又賦值給了onclick，即是說只有在點擊a標簽的時候才會調(diào)用該函數(shù)，因此從邏輯上來說，在單純的for循環(huán)里面function(){alert(i);}這段函數(shù)實際上是沒有執(zhí)行的，而當我們點擊a標簽的時候for循環(huán)早就已經(jīng)執(zhí)行完畢，此時i的值就是for循環(huán)執(zhí)行完畢的終態(tài)值。通俗一點理解，就是這個i的值是屬于b函數(shù)的，而我們需要的i的值是實時傳遞進事件處理函數(shù)中的值。那么有什么方法可以實現(xiàn)我們的設計初衷呢？聰明的同學可能已經(jīng)猜到了，那就是使用閉包。
下面我們再來看一段代碼:
var a=document.getElementsByTagName("a");
function b(){
for(var i=0;i<a.length;i++){
a[i].onclick=function(j){
return function(){
alert(j);
}
}(i);
}
}
b();
執(zhí)行以上代碼可以發(fā)現(xiàn)，我們所要的功能已經(jīng)實現(xiàn)，即點擊任意a標簽都會彈出該標簽所在的序列號。對上述代碼，相信許多同學都看過許多雷同的版本，但是為什么這樣做就能實現(xiàn)我們需要的功能了呢，一下是個人的一點淺見，如有不當，還請不吝賜教。
對上述代碼的理解，其本質(zhì)就是對變量i的理解。在這段代碼中，函數(shù)執(zhí)行到for循環(huán)處發(fā)現(xiàn)了一個立即調(diào)用函數(shù)，這個時候給這個立即調(diào)用函數(shù)傳遞實時的i變量值，函數(shù)立即調(diào)用完成，事件處理函數(shù)也就存儲了實時的i變量值。
以上所述就是本文的全部內(nèi)容了，希望對大家理解js閉包能夠有所幫助。
相關文章
JavaScript函數(shù)內(nèi)部屬性和函數(shù)方法實例詳解
函數(shù)是由事件驅(qū)動的或者當它被調(diào)用時執(zhí)行的可重復使用的代碼塊。通過本文給大家介紹JavaScript函數(shù)內(nèi)部屬性和函數(shù)方法，感興趣的朋友一起學習吧2016-03-03
這篇文章主要介紹了關于在 JavaScript 中如何讓 this 保持正確的指向的解決方案,文中給大家介紹了三種解決方案,使用閉包,使用箭頭函數(shù)和換綁 this這三種方法,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-01-01
JS讀取XML文件數(shù)據(jù)并以table形式顯示數(shù)據(jù)的方法(兼容IE與火狐)
這篇文章主要介紹了JS讀取XML文件數(shù)據(jù)并以table形式顯示數(shù)據(jù)的方法,涉及javascript針對xml節(jié)點操作及HTML表格操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了JS實現(xiàn)TITLE懸停長久顯示效果,結(jié)合完整實例形式分析了JavaScript鼠標事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2020-02-02
這篇文章主要為大家詳細介紹了DOM2兼容處理順序問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
JavaScript DOM 編程藝術（第2版）讀書筆記(JavaScript的最佳實踐)
閱讀了本書第五章關于使用JavaScript的最佳實踐，大部分的建議之前都有耳聞，不過閱讀之后有更深的體會2013-10-10
bootstrap fileinput實現(xiàn)文件上傳功能
這篇文章主要為大家詳細介紹了bootstrap fileinput實現(xiàn)文件上傳功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
性能優(yōu)化篇之Webpack構建速度優(yōu)化的建議
這篇文章主要介紹了性能優(yōu)化篇之Webpack構建速度優(yōu)化的建議，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
原生JS實現(xiàn)圖片無縫滾動方法(附帶封裝的運動框架)
下面小編就為大家?guī)硪黄鶭S實現(xiàn)圖片無縫滾動方法(附帶封裝的運動框架)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要為大家詳細介紹了如何基于JavaScript構建高級視頻播放器,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-04-04