在前端编程中，使用闭包是非常常见的，我们经常有意无意，直接或间接用到了闭包。闭包可以使传递数据更加灵活(比如处理一些点击事件)
!function() {
var localData = "localData here";
document.addEventListener('click', //处理点击事件时用到了外部局部变量，比如这里的localData
function(){
console.log(localData);
});
}();
又比如下面这个例子：（是不是很亲切~~）
!function() {
var localData = "localData here";
var url = "http://www.baidu.com/";
$.ajax({
url : url,
success : function() {
// do sth...
console.log(localData);
}
});
}();
闭包的概念
各种专业文献上的"闭包"（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
闭包的用途
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。
使用闭包的注意点
- 产生内存消耗问题:由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
- 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
在循环中创建闭包：一个常见的错误
在ECMAScript2015引入let关键字以前，在循环中有一个常见的闭包创建问题。如下：
<button>1</button>
<button>2</button>
<button>3</button>
<script>
var els = document.querySelectorAll('button');
for(var i=0; i<els.length ; i++){
els[i].onclick = function(){
alert( '第'+ i +`按钮` )
}
}
</script>
运行以上代码，会发现没有达到想要的结果。无论点击哪个按钮，弹窗提示的都是第3个按钮。
原因是赋值给onclick的是闭包。三个闭包在循环中被创建，但是他们共享同一个词法作用域，在这个作用域中存在一个变量i。当onclick的回调执行时，i的值被决定。由于循环在事件触发之前早已执行完毕，变量i（被三个闭包共享）已经变成了'3'。
解决这个问题的一种方案是使用跟多的闭包:特别是使用前面所述的函数工厂：
<button>1</button>
<button>2</button>
<button>3</button>
<script>
var els = document.querySelectorAll('button');
function clickCallback(x){
return function(){
alert(x)
}
}
for(var i=0; i<els.length ; i++){
els[i].onclick = clickCallback(i)
}
</script>
这段代码可以如我们所期望的那样工作。所有的回调不再共享同一个环境，clickCallback函数为每一个回调创建一个新的词法环境。在这些环境中。x指向循环中的i。
作者：邸琨