#javascript#用闭包的方式解决循环中的i值异常

以下代码未按预期的效果输出

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

浏览器控制台输出效果不是预期结果 预期结果

用闭包可以来解决这个问题，让代码按预期输出

方法一：将i保存在每个段落对象的一个属性上

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

方法二：将i保存在匿名函数本身的一个属性上

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的值复制到参数num里

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

方法五：在外面再加一层闭包，返回一个函数作为响应事件

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