js核心基礎之閉包怎么用

這篇文章主要介紹了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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“js核心基礎之閉包怎么用”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!