本文實(shí)例講述了js閉包的應(yīng)用。分享給大家供大家參考，具體如下：

需求：有一個(gè)列表，當(dāng)點(diǎn)擊哪一行，則顯示當(dāng)前是第幾行。

html代碼：

<p>第一行</p><p>第二行</p><p>第三行</p>

錯(cuò)誤js代碼示范：

function addHander(nodes){  for ( var i=0;i<nodes.length;i++) {    var node=nodes[i];    node.onclick=function(){     alert('當(dāng)前是第'+i+'行');//3 3 3    }  }}var nodes=document.getElementsByTagName("p");addHander( nodes);

從邏輯上來(lái)看，毫無(wú)漏洞，對(duì)不對(duì)？

但是，當(dāng)你每次點(diǎn)擊的時(shí)候，彈出的都是最后一行。

原理：當(dāng)頁(yè)面加載完成之后就調(diào)用addHandler函數(shù)，為每個(gè)節(jié)點(diǎn)綁定點(diǎn)擊事件處理函數(shù)，綁定的是匿名函數(shù)，但是，這時(shí)候node上的匿名函數(shù)并沒(méi)有被調(diào)用，所以，當(dāng)for循環(huán)完成之后i已經(jīng)等于3了，當(dāng)你點(diǎn)擊節(jié)點(diǎn)時(shí)，調(diào)用匿名函數(shù)所以彈出的就是3了。

解決方法一：

function addHandler(nodes) { function invoke(i) {   return **function () {     alert(i+1);   }** } for (var i=0;i<nodes.length;i++){   var node=nodes[i];   node.onclick=invoke(i); }}var nodes=document.getElementsByTagName("p");addHandler( nodes);

原理：當(dāng)addHandler函數(shù)被調(diào)用之后，節(jié)點(diǎn)同樣被綁定了點(diǎn)擊事件處理函數(shù)，但是，這時(shí)后綁定的是invoke函數(shù)返回的匿名函數(shù)（function (i){ alert (i+1) }），我們可以想象一下，當(dāng)點(diǎn)擊節(jié)點(diǎn)時(shí)，調(diào)用invoke函數(shù)返回的匿名函數(shù)，并且將i作為參數(shù)傳過(guò)去，這時(shí)候這個(gè)I則是當(dāng)前點(diǎn)擊節(jié)點(diǎn)的索引下標(biāo)，所以，彈出的應(yīng)該是i+1;

解決方法二：

function addHandler(nodes){  for ( var i=0;i<nodes.length;i++) {    var node=nodes[i];    node.onclick=**function(j){    //同樣的返回的均為函數(shù)，但匿名函數(shù)自調(diào)用將其激活了      return *function(){//閉包        alert(j+1);      }*    }(i);**  }}var nodes=document.getElementsByTagName("p");addHandler(nodes);

原理：

綁定的也是一個(gè)匿名函數(shù)，但是外層的匿名函數(shù)（見(jiàn)粗體）自調(diào)用激活了，返回的同樣是個(gè)匿名函數(shù)（見(jiàn)斜體），這個(gè)匿名函數(shù)則是要等到點(diǎn)擊之后才被調(diào)用，這時(shí)，彈出的同樣是當(dāng)前節(jié)點(diǎn)的索引下標(biāo)+1.

若是感覺(jué)自己已經(jīng)理解，但是又沒(méi)辦法驗(yàn)證，這里有個(gè)練習(xí)題，可以試試。

function f(){  var a=[];  for ( var i=0;i<3;i++) {    a[i]=function(){      return i*2;    }  }  return a;}var result=f();document.write(result[0]()+result[1]()+result[2]());//輸出為6  6  6

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。