DIV CSS 佈局教程網

淺談js中的閉包
編輯:JavaScript綜合知識     

 閉包是一個比較抽象的概念,尤其是對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閉包能夠有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved