閉包是一個比較抽象的概念,尤其是對js新手來說.書上的解釋實在是比較晦澀,對我來說也是一樣.閉包是很多語言都具備的特性,在js中,閉包主要涉及到js的幾個其他的特性:作用域鏈,垃圾(內存)回收機制,函數(shù)嵌套,等等.
首先我們先來看一段代碼:
代碼如下:
<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標簽的時候才會調用該函數(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)我們需要的功能了呢,一下是個人的一點淺見,如有不當,還請不吝賜教。
對上述代碼的理解,其本質就是對變量i的理解。在這段代碼中,函數(shù)執(zhí)行到for循環(huán)處發(fā)現(xiàn)了一個立即調用函數(shù),這個時候給這個立即調用函數(shù)傳遞實時的i變量值,函數(shù)立即調用完成,事件處理函數(shù)也就存儲了實時的i變量值。
以上所述就是本文的全部內容了,希望對大家理解js閉包能夠有所幫助。
更多信息請查看IT技術專欄