1. 变量作用域
理解闭包，首先必须理解变量作用域，在ECMAScript5的标准中有两种作用域：全局作用域和函数作用域。
两者的调用关系是：
- 函数内部可以直接读取全局变量；
- 正常情况下，函数外部无法读取函数内部声明的变量；
let num = 1;
function test() {
let n = 2;
console.log(num); // 1
}
test();
console.log(n); // ReferenceError: n is not defined
实际开发中会出于各种原因，我们必须得拿到函数内部的局部变量。
JavaScript 语言规定：父对象的所有变量，对子对象都是可见的，反之则不成立。即"链式作用域"结构（chain scope） 。
基于这一点，我们就可以在目标函数内再定义一个函数，这个子函数就可以正常访问其父函数的内部变量。
function parent() {
let n = 1;
function child() {
console.log(n); // 1
}
}
既然子函数可以拿到父函数的局部变量，那么父函数直接返回这个子函数，不就达到了在全局作用域下访问函数内部变量的目的了。
function parent() {
let n = 1;
function child() {
console.log(n); // 1
};
return child;
}
let f1 = parent();
f1();
2. 闭包的概念及特性
上述的例子就是一个最简单的闭包的写法：函数 child 就是闭包，所以闭包就是一个“定义在函数内部的函数”。 在本质上，闭包就是一座连接函数内外的桥梁。
闭包本身还具有以下几点重要的特性：
- 函数内嵌套函数；
- 闭包内可以访问其外层函数的内部参数，变量或方法；
- 闭包内用到的参数和变量会始终保存在内存中，不会在函数调用结束后，被垃圾回收机制回收；
- 同一个闭包机制可以创建出多个闭包函数实例，它们彼此独立，互不影响；
3. 闭包的经典写法
3.1 函数作为返回值
上述的例子还可以进一步精简为匿名函数的写法：
通过匿名函数访问其外层函数的内部变量 num，然后外层函数返回该匿名函数，该匿名函数继续返回 num 变量。
function closure1(){
let num = 1;
return function(){
return num
}
}
let fn1 = closure1();
console.log(fn1()); // 1
这样就可以在全局作用域下声明一个变量 fn1 来承接 num 变量，这样就达到了在全局作用域访问函数内局部变量的目的。
3.1.1 保存变量
闭包在可以读取函数内局部变量的同时，它还可以让这些变量始终保存在内存中，不会在函数调用结束后，被垃圾回收机制回收。
比如这个例子：
function closure2(){
let num = 2;
return function(){
let n = 0;
console.log(n++,num++);
}
}
let fn2 = closure2();
fn2(); // 0 2
fn2(); // 0 3
执行两次函数实例 fn2()，可以看到结果是略有差异的：
-
n++ 两次输出一致：
变量 n 是匿名函数的内部变量，在匿名函数调用结束后，它这块内存空间就会被正常释放，即被垃圾回收机制回收。 -
num++ 两次输出不一致：
匿名函数内引用了其外层函数的局部变量 num，即使匿名函数的调用结束了，但是这种依赖关系依然存在，所以变量 num 就无法被销毁。一直保存在内存中 匿名函数下次调用时，就会继续沿用上次的调用结果。
利用闭包的这一特性，确实可以做简单的数据缓存。
但是也不能滥用闭包，这样很容易使内存消耗增大，进而导致内存泄漏或者网页的性能问题。
3.1.2 多个闭包函数彼此独立
同一个闭包机制可以创建出多个闭包函数实例，它们彼此独立，互不影响。
比如下面这个简单的例子：
function fn(num){
return function(){
return num++
}
}
我们分别声明三个闭包函数实例，分别传入不同的参数。然后分别执行1，2，3次：
function fn(num){
return function(){
return num++
}
}
let f1 = fn(10);
let f2 = fn(20);
let f3 = fn(30);
console.log(f1()) // 10
console.log(f2()) // 20
console.log(f2()) // 21
console.log(f3()) // 30
console.log(f3()) // 31
console.log(f3()) // 32
可以看到：f1()，f2()，f3()的第一次执行依次输出了10 20 30，多执行的也是在自身上次执行的结果上累加的，互相之间没有影响。
3.2 立即执行函数（IIFE）
上一种写法中函数只是作为返回值返回，而具体的函数调用是写在其他地方。那么我们能不能让外层函数直接返回闭包的调用结果呢？
答案当然是可以的：采用立即执行函数（IIFE）的写法。
接下来就先了解一下具体什么是立即执行函数（IIFE）：
我们都知道，在 JavaScript中调用函数最常用的方法就是函数名之后跟圆括号()。有时，我们需要在定义函数之后，立即调用该函数。但是你不能直接在函数定义之后加上圆括号，这样会产生语法错误。
// 提示语法错误
function funcName(){}();
产生错误的原因是，function 关键字既可以当作语句，也可以当作表达式。
// 语句
function f() {}
// 表达式
var f = function f() {}
当作表达式时，函数可以定义后直接加圆括号调用。
var f = function f(){ return 1}();
console.log(f) // 1
为了避免解析的歧义，JavaScript 规定，如果 function 关键字出现在行首，一律解释成语句。那么如果我们还想用 function 关键字声明函数后能立即调用，就需要让 function 不直接出现在行首，让引擎将其理解成一个表达式。
最简单的处理，就是将其放在一个圆括号里面。
(function(){ /* code */ }());
// 或者
(function(){ /* code */ })();
这就叫做“立即调用的函数表达式”（Immediately-Invoked Function Expression），即立即执行函数，简称 IIFE 。
3.2.1 定时器 setTimeout 的经典循环输出问题
了解过立即执行函数后，赶紧来看一个实例：使用for循环依次输出1~5。那么如果是下面的代码，它的运行结果是什么？
for (var i = 1; i <= 5; i++) {
setTimeout( function timer() {
console.log(i); // 6 6 6 6 6
}, 1000 );
}
结果肯定是输出5个6。原因是 for 循环属于同步任务，setTimeout 定时器属于异步任务的宏任务范畴。JavaScript 引擎会优先执行同步的主线程代码，再去执行宏任务。
所以在执行 setTimeout 定时器之前，for 循环就已经结束了，此时循环变量 i = 6。然后 setTimeout 定时器被循环创建了 5 次，全部执行完毕也就输出了5个6。
但是我们的目的是希望输出1~5，这样显然没达到要求。在正式介绍立即执行函数（IIFE）的写法之前，我先说另外一种方法：循环变量 i 使用let关键字声明。
for (let i = 1; i <= 5; i++) {
setTimeout( function timer() {
console.log(i); // 1 2 3 4 5
}, 1000 );
}
为什么换成let声明之后就可以呢？是因为要想实现1~5循环输出的本质要求是记住每次循环时循环变量的值。
而 let 的声明方式恰好就可以满足。传送门：JavaScript中 var、let、const 特性及区别详解
这样再来看立即执行函数（IIFE）的写法：
for (var i = 1; i <= 5; i++) {
(function(i){
setTimeout( function timer() {
console.log(i); // 1 2 3 4 5
}, 1000 );
})(i);
}
把 setTimeout 定时器函数用一个外层匿名函数包裹构成闭包的形式，然后再采用立即执行函数（IIFE）的写法：继续用圆括号包裹外层匿名函数，然后跟上圆括号调用，并把每次的循环变量作为参数传入。
这样每次循环的结果就是闭包的调用结果：输出 i 的值；再根据闭包本身的特性之一：可以保存变量或参数，就满足了所有条件从而正确输出了1~5。
再多说一点，目前的输出形式是一秒后同时输出1~5；那我想这五个数字每隔一秒再输出一个呢？
for (var i = 1; i <= 5; i++) {
(function(i){
setTimeout( function timer() {
console.log(i);
}, i*1000 );
})(i);
}
可以控制每个setTimeout定时器的第二个参数：间隔时长，依次乘上循环变量 i 即可。
效果如下：
3.2.2 函数作为API的形参传入
闭包结合立即执行函数（IIFE） 的这种机制还有一类很重要的用处是：需要函数作为形参的各种API。
以数组的 sort() 方法为例：Array.prototype.sort() 方法中支持传入一个比较器函数，来让我们自定义排序的规则。该比较器函数必须要有返回值，推荐返回 Number 类型。
比如以下的数组场景：我们希望你能编写一个 mySort() 方法：可以按照指定的任意属性值降序排列数组元素。
mySort() 方法肯定需要两个形参：需要排序的数组 arr 和指定的属性值 property。
另外用到的 API 肯定还是 sort() 方法，这里我们就不能直接传入一个比较器函数，而是采用闭包的IIFE写法：
属性值 property 作为参数传入外层匿名函数，然后匿名函数内部返回最终 sort() 方法需要的比较器函数。
var arr = [
{name:"code",age:19,grade:92},
{name:"zevi",age:12,grade:94},
{name:"jego",age:15,grade:95},
];
function mySort(arr,property){
arr.sort((function(prop){
return function(a,b){
return a[prop] > b[prop] ? -1 : a[prop] < b[prop] ? 1 : 0;
}
})(property));
};
mySort(arr,"grade");
console.log(arr);
/*
[
{name:"jego",age:15,grade:95},
{name:"zevi",age:12,grade:94},
{name:"code",age:19,grade:92},
]
*/
3.3 封装对象的私有属性和私有方法
闭包同时也可以用于对象的封装，尤其是封装对象的私有属性和私有方法：
我们封装了一个对象 Person，它拥有一个公共属性 name，一个私有属性 _age 和两个私有方法。
我们不能直接访问和修改私有属性 _age，必须通过调用其内部的闭包 getAge 和 setAge。
function Person(name) {
var _age;
function setAge(n) {
_age = n;
}
function getAge() {
return _age;
}
return {
name: name,
getAge: getAge,
setAge: setAge
};
}
var p1 = Person('zevin');
p1.setAge(22);
console.log(p1.getAge()); // 22
4. 使用闭包的优缺
4.1 优点
4.1.1 实现封装，保护函数内的变量安全
采用闭包的写法可以把变量保存在内存中，不会被系统的垃圾回收机制销毁，从而起到了保护变量的作用。
function closure2(){
let num = 1;
return function(){
console.log(num++)
}
}
let fn2 = closure2();
fn2(); // 1
fn2(); // 2
4.1.2 避免全局变量的污染
开发中应该尽量避免使用全局变量，防止不必要的命名冲突和调用错乱
// 报错
var num = 1;
function test(num){
console.log(num)
}
test();
let num = test(4);
console.log(num);
这时就可以选择把变量声明在函数内部，并采用闭包的机制。
这样既能保证变量的正常调用，又可以避免全局变量的污染。
function test(){
let num = 1;
return function(){
return num
}
}
let fn = test();
console.log(fn());
4.2 缺点
4.2.1 内存消耗和内存泄漏
外层函数每次运行，都会生成一个新的闭包，而这个闭包又会保留外层函数的内部变量，所以内存消耗很大。
解决方法：不滥用闭包。
同时闭包中引用的内部变量会被保存，得不到释放，从而也造成了内存泄漏的问题。
解决方法：
window.onload = function(){
var userInfor = document.getElementById('user');
var id = userInfor.id;
oDiv.onclick = function(){
alert(id);
}
userInfor = null;
}
在内部闭包使用变量 userInfor 之前，先用一个其他的变量id 来承接一下，并且使用完变量 userInfor 后手动为它赋值为 null。
