淺談js中的閉包

淺談js中的閉包

 閉包是一個比較抽象的概念,尤其是對js新手來說.書上的解釋實在是比較晦澀,對我來說也是一樣.閉包是很多語言都具備的特性,在js中,閉包主要涉及到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標籤的個數，這是什麼原因呢？這個問題困擾了我很久，查閱了許多網上的資料還有參考書籍，大多說的似是而非，相信也有許多同學對其中原因也不甚瞭解，就這個問題我談談自己的理解，如有不當之處，還請批評指正。

　　就我個人的理解，上述函數未能達到目的的原因是，事件處理函數綁定了變數i，而該事件處理函數又賦值給了onclick，即是說只有在點擊a標籤的時候才會調用該函數，因此從邏輯上來說，在單純的for迴圈裡面function(){alert(i);}這段函數實際上是沒有執行的，而當我們點擊a標籤的時候for迴圈早就已經執行完畢，此時i的值就是for迴圈執行完畢的終態值。通俗一點理解，就是這個i的值是屬於b函數的，而我們需要的i的值是即時傳遞進事件處理函數中的值。那麼有什麼方法可以實現我們的設計初衷呢？聰明的同學可能已經猜到了，那就是使用閉包。

下面我們再來看一段代碼:

 

代碼如下:

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();

 

　　執行以上代碼可以發現，我們所要的功能已經實現，即點擊任意a標籤都會彈出該標籤所在的序號。對上述代碼，相信許多同學都看過許多雷同的版本，但是為什麼這樣做就能實現我們需要的功能了呢，一下是個人的一點淺見，如有不當，還請不吝賜教。

　　對上述代碼的理解，其本質就是對變數i的理解。在這段代碼中，函數執行到for迴圈處發現了一個立即調用函數，這個時候給這個立即調用函數傳遞即時的i變數值，函數立即調用完成，事件處理函數也就儲存了即時的i變數值。

以上所述就是本文的全部內容了，希望對大家理解js閉包能夠有所協助。