For循环和闭包问题

考虑一下以下的代码片段：

for (var i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click', function(){ console.log(i); });
  document.body.appendChild(btn);
}

（a)当用户点击“Button4”的时候会打印什么？并解释为什么？

（b)提供一个或多个正确的实现方式。

答：(a)无论点击哪个按钮，都将打印5.因为任何按钮在调用onclick方法时，for循环已经完成了，变量i的值变成了5.

　　(b)关键是要抓住在每一次循环for的时候要把i的值传人到最近创建的函数对象中。

下面有三个可能的方式解决这个问题：

//方法1：作为函数参数调用
for (var i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click', (function(i) {
    return function() { console.log(i); };
  })(i));
  document.body.appendChild(btn);
}

//方法2：将整个btn.addEventListener封装在一个新的匿名函数里
for (var i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  (function (i) {
    btn.addEventListener('click', function() { console.log(i); });
  })(i);
  document.body.appendChild(btn);
}

//方法3：将for循环换成array对象的本地调用方法forEach.
['a', 'b', 'c', 'd', 'e'].forEach(function (value, i) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click', function() { console.log(i); });
  document.body.appendChild(btn);
});