共计 3356 个字符，预计需要花费 9 分钟才能阅读完成。
本文是 重温基础 系列文章的第十九篇。今日感受：将混乱的事情找出之间的联系，也是种能力。
系列目录：
【复习资料】ES6/ES7/ES8/ES9 资料整理 (个人整理)
【重温基础】1-14 篇
【重温基础】15.JS 对象介绍
【重温基础】16.JSON 对象介绍
【重温基础】17.WebAPI 介绍
【重温基础】18. 相等性判断
本章节复习的是 JS 中的关于闭包，这个小哥哥呀，看看。
前置知识：声明函数两种方法：
函数声明，存在函数声明提升，因此可以在函数声明之前调用（不会报错）。
fun(); // ok
function fun(){};
函数表达式，不存在函数声明提升，若定义前调用，会报错（函数还不存在）。
fun(); // error
var fun = function (){};
1. 概念
2.1 词法作用域
这里先要了解一个概念，词法作用域：它是静态的作用域，是书写变量和块作用域的作用域 **。
function f (){
var a = “leo”;
function g(){console.log(a)};
g();
}
f(); // “leo”
由于函数 g 的作用域中没有 a 这个变量，但是它可以访问父作用域，并使用父作用域下的变量 a，最后输出 ”leo”。
词法作用域中使用的域，是变量在代码中声明的位置所决定的。嵌套的函数可以访问在其外部声明的变量。
2.2 闭包
接下来介绍下闭包概念，闭包是指有权访问另一个函数作用域中的变量的函数。
闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量。
创建闭包的常见方式：在一个函数内创建另一个函数。如：
function f (){
var a = “leo”;
var g = function (){
console.log(a);
};
return g;// 这里 g 就是一个闭包函数，可以访问到 g 作用域的变量 a
}
var fun = f();
fun(); // “leo”
通过概念可以看出，闭包有以下三个特征：
函数嵌套函数
函数内部可以引用函数外部的参数和变量
参数和变量不会被垃圾回收机制回收
注：关于内存回收机制，可以查看阮一峰老师的《JavaScript 内存泄漏教程》。
另外，使用闭包有以下好处：
将一个变量长期保存在内存中
避免全局变量的污染
function f (){
var a = 1;
return function(){
a++;
console.log(a);
}
}
var fun = f();
fun(); // 2
fun(); // 3
因为垃圾回收机制没有回收，所以每次调用 fun() 都会返回新的值。
私有化成员，使得外部不能访问
function f (){
var a = 1;
function f1 (){
a++;
console.log(a);
};
function f2 (){
a++;
console.log(a);
};
return {g1:f1, g2:f2};
};
var fun = f();
fun.g1(); // 2
fun.g2(); // 3
2. 易错点
2.1 引用的变量发生变化
function f (){
var a = [];
for(var i = 0; i<10; i++){
a[i] = function(){
console.log(i);
}
}
return a;
}
var fun = f();
fun[0](); // 10
fun[1](); // 10
// …
fun[10](); // 10
原本照我们的想法，fun 方法中每个元素上的方法执行的结果应该是 1,2,3,…,10，而实际上，每个返回都是 10，因为每个闭包函数引用的变量 i 是 f 执行环境下的变量 i，循环结束后，i 已经变成 10，所以都会返回 10。解决办法可以这样：
function f (){
var a = [];
for(var i = 0; i<10; i++){
a[i] = function(index){
return function(){
console.log(index);
// 此时的 index，是父函数作用域的 index，
// 数组的 10 个函数对象，每个对象的执行环境下的 index 都不同
}
}(i);
};
return a;
};
var fun = f();
fun[0](); // 0
fun[1](); // 1
// …
fun[10](); // 10
2.2 this 指向问题
var obj = {
name : “leo”,
f : function(){
return function(){
console.log(this.name);
}
}
}
obj.f()(); // undefined
由于里面的闭包函数是在 window 作用域下执行，因此 this 指向 window。
2.3 内存泄漏
当我们在闭包内引用父作用域的变量，会使得变量无法被回收。
function f (){
var a = document.getElementById(“leo”);
a.onclick = function(){console.log(a.id)};
}
这样做的话，变量 a 会一直存在无法释放，类似的变量越来越多的话，很容易引起内存泄漏。我们可以这么解决：
function f (){
var a = document.getElementById(“leo”);
var id = a.id;
a.onclick = function(){};
a = null; // 主动释放变量 a
}
通过把变量赋值成 null 来主动释放掉。
3. 案例
3.1 经典案例——定时器和闭包
代码如下：
for(var i = 0 ; i<10; i++){
setTimeout(function(){
console.log(i);
},100);
}
不出所料，返回的不是我们想要的 0,1,2,3,…,9，而是 10 个 10。这是因为 js 是单进程，所以在执行 for 循环的时候定时器 setTimeout 被安排到任务队列中排队等候执行，而在等待过程中，for 循环已经在执行，等到 setTimeout 要执行的时候，for 循环已经执行完成，i 的值就是 10，所以就打印了 10 个 10。解决方法：
1. 使用 ES6 新增的 let。
把 for 循环中的 var 替换成 let。
2. 使用闭包
for(var i = 0; i<10 ; i++){
(function(i){
setTimeout(function(){
console.log(i);
}, i*100);
})(i);
}
3.2 使用闭包解决递归调用问题
function f(num){
return num >1 ? num*f(num-1) : 1;
}
var fun = f;
f = null;
fun(4) // 报错，因为最好是 return num* arguments.callee（num-1），arguments.callee 指向当前执行函数，但是在严格模式下不能使用该属性也会报错，所以借助闭包来实现
这里可以使用 return num >1 ? num* arguments.callee(num-1) : 1;，因为 arguments.callee 指向当前执行函数，但是在严格模式下不能使用，也会报错，所以这里需要使用闭包来实现。
function fun = (function f(num){
return num >1 ? num*f(num-1) : 1;
})
这样做，实际上起作用的是闭包函数 f，而不是外面的 fun。
3.3 使用闭包模仿块级作用域
ES6 之前，使用 var 声明变量会有变量提升问题：
for(var i = 0 ; i<10; i++){console.log(i)};
console.log(i); // 变量提升 返回 10
为了避免这个问题，我们这样使用闭包（匿名自执行函数）：
(function(){
for(var i = 0 ; i<10; i++){console.log(i)};
})()
console.log(i); // undefined
我们创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，因此在函数执行完后会立刻释放资源，关键是不污染全局对象。这里 i 随着闭包函数的结束，执行环境销毁，变量回收。但是现在，我们用的更多的是 ES6 规范的 let 和 const 来声明。
参考文章
MDN 闭包
《JavaScript 高级程序设计》
本部分内容到这结束
Author
王平安
E-mail
pingan8787@qq.com
博 客
www.pingan8787.com
微 信
pingan8787
每日文章推荐
https://github.com/pingan8787…
JS 小册
js.pingan8787.com
