从循环添加事件谈起对JS闭包的理解

1.引子

相信很多初学js的人，都遇到这样一种情况：想要给一堆按钮添加各自的事件，比如点击第i个按钮时，弹出i这个值。理所当然地，我们会这样写：

 var buttons = document.getElementsByTagName("button");　　//假设一共有8个按钮
 for(var i = 0; i < buttons.length; i++) {
     buttons[i].onclick = function() {
         alert("我的index是"+i);
     }
 }

然而结果却与想象中不同。无论点击哪个按钮，弹出的都是最后的一个i的值，为什么呢？

对于这个问题，我自己的理解是这样的：

JS的有两种变量作用域：全局作用域和函数作用域。进行循环之后，i的值变成了8。这里的i是位于全局作用域，因此，每当我们点击任何一个按钮时，调用那个匿名函数，里面的i永远是等于8的，弹出的值自然也等于8了。

那么如何达到我们想要的效果呢？这时候就需要用到闭包了。

2.什么是闭包

网上一个比较好的关于闭包的解释是这样的：

能够读取其他函数内部变量的函数

光看概念是难以理解的，让我们看看下面的一段代码：

 function a() {
     var i = 0;
     function b() {
         ++i;
         alert(i);
     }
     return b;
 }
 var c = a();
 c(); //
 c(); //

在上面这段代码中，b是函数a的内部函数，但b被外部的一个变量c引用着，函数b又引用着变量i。在这种情况下，由于函数a内部的变量i被引用着，即使a这个函数执行完毕，a内部的变量i依然不会被js的垃圾回收机制回收，依然能够被引用。

由此我们也发现了闭包的两大用处：

1.可以读取函数内部的变量（在上面的例子中，我们可以在全局读取到函数a内部的变量）

2.让这些变量的值始终保持在内存中（i被b引用，b又被外部变量c引用，因此i始终在内存中）

看到这里，我们大概也能理解闭包这个定义了——“能够读取其他函数内部变量的函数”。把这句话放在上面的例子中，“能够读取函数a内部变量i的函数c”。

上面提到的，使用闭包可以让变量的值始终保存在内存中，我们不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

3.从垃圾回收机制理解闭包

在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。因为函数a被b引用，b又被a外的c引用，这就是为什么函数a执行后不会被回收的原因。

4.回到一开始的例子

理解闭包之后，我们就可以将这个东西应用到我们一开始的情况中，我们需要把要弹出的值一直保存在内存中，并保持着引用关系，实现方法如下：

 for(var i = 0; i < buttons.length; i++) {
      buttons[i].onclick = (function(k) {
          return function() {
              alert("我的index是" + k);
          }
      })(i);
  }

我们把i当作参数传入一个函数内部，然后在函数内部返回另一个函数，并用buttons[i].onclick引用这个返回的函数，使内部变量k保存在内存中，就能实现我们想要的效果了。

5.总结

我比较喜欢的闭包的一种解释是：某个函数【需要用到的变量在外层的函数里】，这个函数就拉着这个变量组成了闭包（来自知乎）。在上面的例子中，函数就是指b，变量就是指i，而形成的这个闭包，我们赋给了c，我们就可以愉快地利用c去使用这个闭包了。

希望上面的文字也能起到这样提醒作用：除了闭包本身，我们也可以从js的作用域和js的垃圾回收机制去理解它。

本文章部分内容转自：http://www.cnblogs.com/xiangqianjin/p/6595115.html