首先我們先來看一段代碼:
<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);
}
}
}
按照我們設(shè)計的初衷，應(yīng)該是點擊一個a標(biāo)簽就相應(yīng)的彈出該標(biāo)簽的序列號，即點擊第一個a就彈出0，點擊第二個就彈出1...但是事實是彈出的始終是a標(biāo)簽的個數(shù)，這是什么原因呢？這個問題困擾了我很久，查閱了許多網(wǎng)上的資料還有參考書籍，大多說的似是而非，相信也有許多同學(xué)對其中原因也不甚了解，就這個問題我談?wù)勛约旱睦斫?，如有不?dāng)之處，還請批評指正。
就我個人的理解，上述函數(shù)未能達(dá)到目的的原因是，事件處理函數(shù)綁定了變量i，而該事件處理函數(shù)又賦值給了onclick，即是說只有在點擊a標(biāo)簽的時候才會調(diào)用該函數(shù)，因此從邏輯上來說，在單純的for循環(huán)里面function(){alert(i);}這段函數(shù)實際上是沒有執(zhí)行的，而當(dāng)我們點擊a標(biāo)簽的時候for循環(huán)早就已經(jīng)執(zhí)行完畢，此時i的值就是for循環(huán)執(zhí)行完畢的終態(tài)值。通俗一點理解，就是這個i的值是屬于b函數(shù)的，而我們需要的i的值是實時傳遞進(jìn)事件處理函數(shù)中的值。那么有什么方法可以實現(xiàn)我們的設(shè)計初衷呢？聰明的同學(xué)可能已經(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標(biāo)簽都會彈出該標(biāo)簽所在的序列號。對上述代碼，相信許多同學(xué)都看過許多雷同的版本，但是為什么這樣做就能實現(xiàn)我們需要的功能了呢，一下是個人的一點淺見，如有不當(dāng)，還請不吝賜教。
對上述代碼的理解，其本質(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閉包能夠有所幫助。
