收了闭包这个小妖精
前言
说到闭包，实在是居家旅行破境渡劫摄魄迷魂必备良药！不吃不知道，一吃哇哇叫，下面我们也去搞两盒试试。
一、闭包是什么
闭包，一个近乎神话的概念，从字面上理解感觉就像是一个比较封闭的东西，百度百科上的定义是：闭包就是能够读取其他函数内部变量的函数。
而我个人比较倾向于这么理解：闭包就是一个封闭包裹了它所能使用的作用域的函数。
这样看起来好像有点那个意思了，通俗的说就是：函数这个袋子把一些作用域装起来了，哪些作用域呢？这个函数作用域链上的作用域。
光说不写假帅气，下面来些例子瞧瞧：
1.1 函数传递
// 1.函数作为返回值
function foo() {
var a = 2;
function bar() {
console.log( a );
}
return bar;
}
var f = foo();
f(); // 2 这就是闭包的效果，或者说f即bar函数就是一个闭包，它把a所在的作用域包了起来，以便自己随时使用
上面的例子是将函数作为值返回，下面我们换个方式试试（其实无论使用何种方式对函数类型的值进行传递，当函数在别处被调用时都可以观察到闭包）。
// 2.函数作为参数传递
function foo() {
var a = 2;
function bar() {
console.log( a );
}
f(bar);
}
function f(fn) {
fn(); // 函数作为参数传递，也包裹了a的作用域，这也是闭包
}
foo(); // 2
// 3.间接传递函数
var fn;
function foo() {
var a = 2;
function bar() {
console.log( a );
}
fn = bar; // 将bar分配给全局变量fn
}
function f() {
fn(); // fn指向bar，bar包裹着a的作用域，这也是闭包
}
foo();
f(); // 2
// 4.回调函数，传递给JS引擎调用
function wait(message) {
setTimeout(function timer() {
console.log(message);
}, 1000);
}
wait( "Hello" ); // 'Hello'
// 将一个内部函数timer传递给setTimeout，timer具有涵盖wait作用域的闭包，因此还有对变量message的引用
其实，在定时器、事件监听器、Ajax请求、跨窗口通信、Web Workers或者任何其他的异步（或者同步）任务中，只要使用了回调函数，实际上就是在使用闭包。
所以无论通过何种手段将内部函数传递到所在的词法作用域以外，它都会持有对原始定义作用域的引用(包裹)，无论在何处执行这个函数都会使用闭包。
tip: 词法作用域指由书写代码时变量所在的位置所决定的作用域。
1.2 IIFE
var a = 2;
(function IIFE() {
console.log(a);
})();
以上这个立即执行函数是闭包吗？嗯，看起来应该是。
但严格来讲它并不是闭包。为什么？因为上面的函数并不是在它本身的词法作用域以外执行的，它在定义时所在的作用域中执行，a是通过普通的词法作用域查找而非闭包被发现的。
尽管IIFE本身并不是观察闭包的恰当例子，但它的确创建了闭包，并且也是最常用来创建可以被封闭起来的闭包的工具，后面我们会讲到。
1.3 循环与闭包
说到这个循环闭包的例子，可谓是如影随形，惺惺相惜，让猿欲罢不能。
for (var i=1; i<=5; i++) {
setTimeout(function timer() {
console.log(i);
}, i*1000);
}
这个想必大家伙就算没吃过也见过这个猪是怎么跑的：以每秒一次的频率输出五次6，而不是每秒一次一个的分别输出1~5。
首先解释6是从哪里来的：这个循环的终止条件是i不再<=5，条件首次成立时i的值是6。因此，输出显示的是循环结束时i的最终值。
仔细想一下，这好像又是显而易见的，延迟函数的回调会在循环结束时才执行。但事实上，当定时器运行时即使每个迭代中执行的是setTimeout(.., 0)，所有的回调函数依然是在循环结束后才会被执行，因此会每次输出一个6出来。
究竟是什么原因导致这结果和我们预想的不一样呢？
原因是我们试图假设循环中的每个迭代在运行时都会给自己“捕获”一个i的副本。但是根据作用域的工作原理，实际情况是尽管循环中的五个函数是在各个迭代中分别定义的，但是它们都被封闭在一个共享的全局作用域中，因此实际上只有一个i，所以都是在共享同一个i。
如何解决这个问题？
我们设想一下如果每次循环函数都能将属于自己的i包裹起来，然后保存下来，那就需要闭包作用域，下面我们试试：
for (var i=1; i<=5; i++) {
(function() {
setTimeout(function timer() {
console.log( i );
}, i*1000);
})();
}
这样行吗？答案是不行。为什么？上面的确创建了五个封闭的作用域，但大家有没有注意到，但这个作用域是空的，它们并没有将i包裹并存储起来，我们依旧是引用外部的同一个全局i，所以这个封闭的作用域需要有自己的变量，用来在每个迭代中储存i的值：
for (var i=1; i<=5; i++) {
(function() {
var j = i; // 将i的值存储在闭包内
setTimeout(function timer() {
console.log(j);
}, j*1000);
})();
}
搞定！将timer传递给setTimeout，时间到后，JS引擎会调用timer函数，然后找到对应包裹起来的i，我们还可以再改进一下：
for (var i=1; i<=5; i++) {
(function(j) { // j参数也是属于函数隐式声明的变量
setTimeout(function timer() {
console.log(j);
}, j*1000);
})( i );
}
等等，解决这个问题的方法是每次迭代我们都需要一个块作用域，那么用let来生成块作用域不就搞定了吗？
for(let i=1; i<=5; i++) { // 使用let声明i
setTimeout(function timer() {
console.log(i);
}, i*1000);
}
但let的作用不仅仅是生成块作用域，for循环头部的let声明还会有一个特殊的行为：变量i在循环过程中不止被声明一次，每次迭代都会声明，随后的每个迭代都会使用上一个迭代结束时的值来初始化这个变量。
这种每次迭代重新声明绑定的行为就类似这样：
for (var i=1; i<=5; i++) {
let j = i; //每个迭代重新声明j并将i的值绑定在这个块作用域内
setTimeout( function timer() {
console.log(j);
}, j*1000);
}
这样一路看下来，感觉闭包好像也不是那么神秘嘛，我个人理解的话会把以上归纳为：只要发生了函数传递与调用，就会产生闭包。好了，了解了闭包是什么，那下面来看看它有什么用途。
二、闭包的应用
2.1 模块
闭包最大的作用莫过于创建模块了：
function betterModule() {
var name = 'BetterMan';
var arr = [1, 2, 3];
function getName() {
console.log(name);
}
function joinArr() {
console.log(arr.join('-'));
}
return {
getName: getName,
joinArr: joinArr
}
}
var foo = betterModule();
foo.getName(); // 'BetterMan'
foo.joinArr(); // '1-2-3'
以上就是一个利用闭包来创建的模块，我们来理一理这段代码：
首先，betterModule()只是一个函数，必须要通过调用它来创建一个模块实例。如果不执行外部函数，内部作用域和闭包都无法被创建。
其次，betterModule()返回一个用对象字面量语法{key: value, ...}来表示的对象，这个返回的对象中含有对内部函数而不是内部数据变量的引用，保持了内部数据变量是隐藏且私有的状态，可以将这个对象类型的返回值看作本质上是模块的公共API。
这个对象类型的返回值最终被赋值给外部的变量foo，然后就可以通过它来访问API中的属性，如foo.joinArr()。
tip: 从模块中返回一个实际的对象并不是必须的，也可以直接返回一个内部函数。
jQuery就是如此，jQuery和$标识符就是jQuery模块的公共API，但它们本身都是函数（由于函数也是对象，它们本身也可以拥有属性）。
以上的betterModule函数可以被调用任意多次，每次调用都会创建一个新的模块实例；但如果我们只需要一个实例时，可以对这个模式进行简单的改进来实现单例模式：
var foo = (function betterModule() {
var name = 'BetterMan';
var arr = [1, 2, 3];
function getName() {
console.log(name);
}
function joinArr() {
console.log(arr.join('-'));
}
return {
getName: getName,
joinArr: joinArr
}
})();
我们将模块函数转换成了IIFE，立即调用这个函数并将返回值直接赋值给单例的模块实例foo。
2.2 柯里化
柯里化也用到了闭包，听起来有点高大上，那什么是柯里化呢？
柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术，看起来是不是有点绕，下面看看例子：
function add(a, b, c) {
return a + b + c;
}
console.log(add(1,2,3)); // 6
function newAdd(a) {
return function(b) {
return function(c) {
return a + b + c;
}
}
}
console.log(newAdd(1)(2)(3)); // 6
看着例子对照着定义，看起来描述得还是挺贴切的嘛，其实上面也是利用了闭包的功能绑定了参数的作用域，使得每次调用函数时可以访问上次所传入的参数。
三、闭包的注意事项
通常，函数的作用域及其所有变量都会在函数执行结束后被销毁。但是，在创建了一个闭包以后，这个函数的作用域就会一直保存到闭包不存在为止，因为闭包就是一个函数引用另外一个函数的变量，因为变量被引用着所以不会被回收。这是优点也是缺点，不必要的闭包只会徒增内存消耗，所以我们在使用的时候需要注意这方面。
function add(x) {
return function(y) {
return x + y;
};
}
var add3 = add(3);
var add5 = add(5);
console.log(add3(2)); // 5
console.log(add5(5)); // 10
// 需要手动释放对闭包的引用
add3 = null;
add5 = null;
以上的add3和add5都是闭包，它们共享相同的函数定义，但是保存了不同的环境。在add3的环境中，x为3。而在add5中，x则为5，最后我们通过null手动释放了add3和add5对闭包的引用。
最后
如果到了这里你恍然大悟：原来在我的代码中已经到处都是闭包了，只是平时没注意到而已！那说明我这药方还是有点效果的，如果真的如此，那就来波点赞与关注吧，因为你的支持就是我最大的动力！
