以下代碼未按預(yù)期的效果輸出

<p>11111</p>
<p>22222</p>
<p>33333</p>
<p>44444</p>
<p>55555</p>

var pAry = document.getElementsByTagName("p"); 

for (var i = 0; i < pAry.length; i++) {
  pAry[i].onclick = function () {
    console.log(i);
  };
}  

瀏覽器控制臺輸出效果不是預(yù)期結(jié)果

預(yù)期結(jié)果

用閉包可以來解決這個問題，讓代碼按預(yù)期輸出

方法一：將i保存在每個段落對象的一個屬性上

for (var i = 0; i < pAry.length; i++) {
  pAry[i].i = i;
  pAry[i].onclick = function () {
    console.log(this.i);
  };
}

方法二：將i保存在匿名函數(shù)本身的一個屬性上

for (var i = 0; i < pAry.length; i++) {
  (pAry[i].onclick = function () {
    console.log(arguments.callee.i);
  }).i = i;
}

方法三：在外面再加一層閉包，將i保存在一個局部變量tmp上

for (var i = 0; i < pAry.length; i++) {
  (function () {
    var tmp = i;
    pAry[i].onclick = function () {
      console.log(tmp);
    };
  })();
};

方法四：在外面再加一層閉包，將i的值復(fù)制到參數(shù)num里

for (var i = 0; i < pAry.length; i++) {
  (function (num) {
    pAry[i].onclick = function () {
      console.log(num);
    };
  })(i);
}

方法五：在外面再加一層閉包，返回一個函數(shù)作為響應(yīng)事件

for (var i = 0; i < pAry.length; i++) {
  pAry[i].onclick = function (num) {
    return function () {
      console.log(num);
    }
  }(i);
}