快捷導(dǎo)航

淺談js中的閉包

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

閉包是一個(gè)比較抽象的概念,尤其是對(duì)js新手來(lái)說(shuō).書上的解釋實(shí)在是比較晦澀,對(duì)我來(lái)說(shuō)也是一樣.閉包是很多語(yǔ)言都具備的特性,在js中,閉包主要涉及到j(luò)s的幾個(gè)其他的特性:作用域鏈,垃圾(內(nèi)存)回收機(jī)制,函數(shù)嵌套,等等.

首先我們先來(lái)看一段代碼:

復(fù)制代碼代碼如下:

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

　　　　}　　

　　}

}

　　按照我們?cè)O(shè)計(jì)的初衷，應(yīng)該是點(diǎn)擊一個(gè)a標(biāo)簽就相應(yīng)的彈出該標(biāo)簽的序列號(hào)，即點(diǎn)擊第一個(gè)a就彈出0，點(diǎn)擊第二個(gè)就彈出1...但是事實(shí)是彈出的始終是a標(biāo)簽的個(gè)數(shù)，這是什么原因呢？這個(gè)問(wèn)題困擾了我很久，查閱了許多網(wǎng)上的資料還有參考書籍，大多說(shuō)的似是而非，相信也有許多同學(xué)對(duì)其中原因也不甚了解，就這個(gè)問(wèn)題我談?wù)勛约旱睦斫?，如有不?dāng)之處，還請(qǐng)批評(píng)指正。

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

下面我們?cè)賮?lái)看一段代碼:

復(fù)制代碼代碼如下:

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)實(shí)現(xiàn)，即點(diǎn)擊任意a標(biāo)簽都會(huì)彈出該標(biāo)簽所在的序列號(hào)。對(duì)上述代碼，相信許多同學(xué)都看過(guò)許多雷同的版本，但是為什么這樣做就能實(shí)現(xiàn)我們需要的功能了呢，一下是個(gè)人的一點(diǎn)淺見(jiàn)，如有不當(dāng)，還請(qǐng)不吝賜教。

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

以上所述就是本文的全部?jī)?nèi)容了，希望對(duì)大家理解js閉包能夠有所幫助。

您可能感興趣的文章: