本文實例講述了js閉包的應用。分享給大家供大家參考，具體如下：
需求：有一個列表，當點擊哪一行，則顯示當前是第幾行。
html代碼：
<p>第一行</p><p>第二行</p><p>第三行</p>
錯誤js代碼示范：
function addHander(nodes){ for ( var i=0;i<nodes.length;i++) { var node=nodes[i]; node.onclick=function(){ alert('當前是第'+i+'行');//3 3 3 } }}var nodes=document.getElementsByTagName("p");addHander( nodes);從邏輯上來看，毫無漏洞，對不對？
但是，當你每次點擊的時候，彈出的都是最后一行。
原理：當頁面加載完成之后就調用addHandler函數，為每個節點綁定點擊事件處理函數，綁定的是匿名函數，但是，這時候node上的匿名函數并沒有被調用，所以，當for循環完成之后i已經等于3了，當你點擊節點時，調用匿名函數所以彈出的就是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);原理：當addHandler函數被調用之后，節點同樣被綁定了點擊事件處理函數，但是，這時后綁定的是invoke函數返回的匿名函數（function (i){ alert (i+1) }），我們可以想象一下，當點擊節點時，調用invoke函數返回的匿名函數，并且將i作為參數傳過去，這時候這個I則是當前點擊節點的索引下標，所以，彈出的應該是i+1;
解決方法二：
function addHandler(nodes){ for ( var i=0;i<nodes.length;i++) { var node=nodes[i]; node.onclick=**function(j){ //同樣的返回的均為函數，但匿名函數自調用將其激活了 return *function(){//閉包 alert(j+1); }* }(i);** }}var nodes=document.getElementsByTagName("p");addHandler(nodes);原理：
綁定的也是一個匿名函數，但是外層的匿名函數（見粗體）自調用激活了，返回的同樣是個匿名函數（見斜體），這個匿名函數則是要等到點擊之后才被調用，這時，彈出的同樣是當前節點的索引下標+1.
若是感覺自己已經理解，但是又沒辦法驗證，這里有個練習題，可以試試。
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更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
