淺談js中的閉包_javascript技巧

首先我們先來看一段程式碼:

複製程式碼 程式碼如下:

111
222
333
var a=document.getElementsByTagName("a");
　　function b(){
　　　　for(var i=0;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[i].onclick=function(j){
　　　　　　　　return function(){
　　　　　　　　alert(j);
　　　　　　}
　　　　}(i);
　　}
}
b();

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

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

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