什么是闭包
- 一种写法
- 在函数定义处的环境中自带数据
- 一种为局部定义函数封装信息的方式
闭包热身
普通循环
for (var i = 0; i < 5; i++) {
console.log(i);
} //输出0 1 2 3 4
延时循环
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 1000 * i);
} // 因为1秒后循环已经结束输出5个5
让延时循环输出0到4 (使用闭包)
for (var i = 0; i < 5; i++) {
(function(i) {
setTimeout(function() {
console.log(i);
}, i * 1000);
})(i); //一个立即执行函数，用到了闭包，输出0 1 2 3 4，每次循环都把i保存了下来
}
热身结束，这其实是来自知乎上面一道关于JS运行机制的文章的前半段，运行机制以后再说，有兴趣的话可以先看 运行机制
一，变量作用域
变量作用域有两种：全局变量和局部变量。JavaScript语言规定，在函数内部可以直接读取全局变量。
var n=999;
function f1(){
alert(n);
}
f1(); // 999
另一方面，在函数外部自然无法读取函数内的局部变量。
function f1(){
var n=999;
}
alert(n); // error
注意，函数内部声明变量的时候，一定要使用var命令。如果不使用，实际上声明了一个全局变量。
function f1(){
n=999;
}
f1();
alert(n); // 999
二，如何从外部获取局部变量
如何从外部获取局部变量，那就是在函数的内部，再定义一个函数。
function f1(){
var n=999;
function f2(){
alert(n); // 999
}
}
在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。对上面例子变通下。
function f1(){
var n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
上面代码中，把函数f2作为返回值，那在函数f1外部，就可以获取它内部变量了。
三，闭包
上面代码中，函数f2，就是闭包。闭包就是能够读取其他函数内部变量的函数。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包作用有两个：
- 可以读取函数内部的变量
- 这些变量始终保持在内存中
例一：
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
上面代码中，执行函数f1 返回函数f2，result = f2，result实际上就是闭包f2函数，它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。（具体阅读《JavaScript-内存》一章）
另外，nAdd=function(){n+=1} nAdd是一个全局变量，nAdd的值是一个匿名函数，这个函数本身也是一个闭包。
四，使用闭包注意点
- 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
- 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
例子：
function assignHandler() {
var el = document.getElementById('demo');
el.onclick = function() {
console.log(el.id);
}
}
assignHandler();
以上代码创建了作为el元素事件处理程序的闭包，而这个闭包又创建了一个循环引用，只要匿名函数存在，el的引用数至少为1，因些它所占用的内存就永完不会被回收。
function assignHandler() {
var el = document.getElementById('demo');
var id = el.id;
el.onclick = function() {
console.log(id);
}
el = null;
}
assignHandler();
把变量el设置null能够解除DOM对象的引用，确保正常回收其占用内存。
五，模仿块级作用域
任何一对花括号（｛和｝）中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。
(function(){
//块级作用域
})();
六，实际例子
例一：
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()());
上面代码中，执行object.getNameFunc() 返回 function(){return this.name}在执行一次，相当于执行这个返回函数，得到 this.name 这里的this代表window，所以是全局变量 name
例二：
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()());
上面代码和例一的区别是，把this保存起来，that 代表 object，得到的是 'My Object'
例三：(出自很多人都会做错的闭包题)
function fun(n,o) {
console.log(o);
return {
fun:function(m){
return fun(m,n);
}
};
}
var a = fun(0);a.fun(1); a.fun(2); a.fun(3);//undefined,?,?,?
var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,?
var c = fun(0).fun(1); c.fun(2); c.fun(3);//undefined,?,?,?
/*
解题前，需要知道第一个函数fun(n,o)，第二个函数 fun: function(m){return fun(m,n)}，第三个函数 fun(m,n) 其中第一和第三函数相同
匿名函数有 var fn1=function (){} ，具名函数 function fn1(){} 和 var fn1=function a(){};
*/
/* 第一个
1, var a = fun(0); ---->执行fun(0)后, 返回一个对象 a = {fun:function (m){return fun(m,n)}} ，此时 n = 0, o = undefined
2, a.fun(1); -----> 返回一个函数fun(m,n)，此时 m = 1, n = 0 由于闭包前面的变量不会被删除，所以fun(1,0) 执行后 console.log(o) = 0;
3, a.fun(2), a.fun(3) 和上面一样的结果
*/
/*第二个：链式调用，后面执行的函数调用前面返回的数据
1, var b = fun(0) 和上面第一步一样, 返回 {fun:function (m){return fun(m,n)}} 和 n = 0, o = undefined
2, 执行到 fun(1) 时, 返回 fun(m,n) , 此时 m = 1, n = 0 , 执行 fun(1,0) 后 console.log(o) = 0 返回 {fun:function (m){return fun(m,n)}} ,此时 n = 1, o = 0
3, 执行到 fun(2) 时, 返回 fun(m,n) , 此时 m = 2, n = 1 , 执行 fun(2,1) 后 console.log(o) = 1 返回 {fun:function (m){return fun(m,n)}} ,此时 n = 2, o = 1
4, 执行到 fun(3) 时, 返回 fun(m,n) , 此时 m = 3, n = 2 , 执行 fun(3,2) 后 console.log(o) = 2 返回 {fun:function (m){return fun(m,n)}} ,此时 m = 3, o = 2
*/
/*第三个
1, var c = fun(0).fun(1); 执行和第二个前两步骤一致，o = undefined 和 0
2, 执行到 c.fun(2)时，c = {fun:function (m){return fun(m,n)}} ,此时 n = 1, o = 0, 返回 fun(2,1)后 m = 2, n = 1 ,o = 1;
c.fun(3) 执行出来一致 o = 1;
