淺談js中的閉包

更新時間：2015年03月16日 09:23:20 投稿：hebedich

閉包是一個比較抽象的概念,尤其是對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ù)，這是什么原因呢？這個問題困擾了我很久，查閱了許多網上的資料還有參考書籍，大多說的似是而非，相信也有許多同學對其中原因也不甚了解，就這個問題我談談自己的理解，如有不當之處，還請批評指正。

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

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

復制代碼代碼如下:

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)，我們所要的功能已經實現(xiàn)，即點擊任意a標簽都會彈出該標簽所在的序列號。對上述代碼，相信許多同學都看過許多雷同的版本，但是為什么這樣做就能實現(xiàn)我們需要的功能了呢，一下是個人的一點淺見，如有不當，還請不吝賜教。

　　對上述代碼的理解，其本質就是對變量i的理解。在這段代碼中，函數(shù)執(zhí)行到for循環(huán)處發(fā)現(xiàn)了一個立即調用函數(shù)，這個時候給這個立即調用函數(shù)傳遞實時的i變量值，函數(shù)立即調用完成，事件處理函數(shù)也就存儲了實時的i變量值。

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

您可能感興趣的文章: