JavaScript 闭包误区

在一篇博客中看到了以下代码示例，用来讲解闭包，觉得非常不错，拿来分享一下。

var btns = document.querySelectorAll('.btn'); // 6 elements
var output = document.querySelector('#output');
var events = [1, 2, 3, 4, 5, 6];

// Case 1
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = function(evt) {
    output.innerText += 'Clicked ' + events[i];
  };
}

// Case 2
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = (function(index) {
    return function(evt) {
      output.innerText += 'Clicked ' + events[index];
    };
  })(i);
}

// Case 3
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = (function(event) {
    return function(evt) {
      output.innerText += 'Clicked ' + event;
    };
  })(events[i]);
}

原博客中解释的比较简单，我在这稍微补充一下。

CASE1是一个错误的案例，运行结果将是每个按钮点击，都会得到 ‘Clicked undefined’。

原因是因为在 JavaScript 中 for 语句不能产生一个闭包，而 function是闭包，于是在执行 onclick 赋值的时候，for循环事实上已经结束了，

此时 i 的值为 6 ，于是所有按钮的点击事件里 i 都为 7，所以没能得到预期的效果。

CASE2 CASE3 都可以得到语气的结果，只是CASE3中，闭包使用了值传递的方式，闭包内没有保持 events 的引用，使得外部的 events 可以被 GC ，

故而程序内存占用的更少，性能更加，是个值得推荐的写法。