一、参考一个例子让你读懂什么是JS闭包
需要在公司页面上显示一个浏览时间，从打开页面的瞬间开始计时，每过一秒钟加一
1.全局变量解决方案
//秒数
let second = 0;
//累加器
function counter(){
second += 1;
return second;
}
const recordSecond = setInterval(function(){
//到达10秒后停止
if(second === 10){
clearInterval(recordSecond);
console.log('计时结束！');
return;
}
//调用累加器，输出当前秒数
console.log(`${counter()}秒`);
},1000);
在chrome控制台执行一下结果，可以看到我们已经实现了所需要的功能，每次都更新一个全局变量。但是，所有编程语言中有一条不成文的铁律：尽可能的少定义全局变量。
- 全局变量不好控制，可以在任何地方进行读写，这意味着可能会被不想干的程序改写。
- 全局变量占用内存的生命周期长，一般局部变量，定义在函数中，在函数调用完成后，与之对应的执行环境会退出执行栈，回收机制会每隔一段时间进行一次回收。而全局变量因为随时可以被任何程序在任何地方读写，会导致全局变量一般在全局执行环境被销毁时才会释放。
2.优化一下
首先，将判断停止定时任务的条件放在counter函数中
//秒数
let second = 0;
//累加器
function counter(){
//到达10秒后停止
if(second === 10){
clearInterval(recordSecond);
console.log('计时结束！');
return;
}
second += 1;
console.log(`${second}秒`);
}
const recordSecond = setInterval(function(){
//调用累加器，输出当前秒数
counter();
},1000);
接下来，我们将second定义为局部变量，因为setInterval的回调函数每隔一秒就执行一次，second声明在回调函数中，每次回调函数被调用的同时second就会被初始化，那么就实现不了累加的效果：
//累加器
function counter(){
//秒数
let second = 0;
//到达10秒后停止
if(second === 10){
clearInterval(recordSecond);
console.log('计时结束！');
return;
}
second += 1;
console.log(`${second}秒`);
}
const recordSecond = setInterval(function(){
//调用累加器，输出当前秒数
counter();
},1000);
想必大家已经发现问题了，因为counter的调用是在回调函数中的，那么单纯将second定义在counter中，也避免不了被初始化的操作。
//累加器
function counter(){
//秒数
let second = 0;
function doCounter(){
//到达10秒后停止
if(second === 10){
clearInterval(recordSecond);
console.log('计时结束！');
return;
}
second += 1;
console.log(`${second}秒`);
}
}
const recordSecond = setInterval(function(){
//调用累加器，输出当前秒数
counter();
},1000);
现在，从代码结构上，我们将counter分成了两部分，因为doCounter是counter的内部函数，有权访问外部函数作用域中的变量second。但是，还有一个问题，我们没有将doCounter返回，那么就算counter被调用，也只是执行了对其内部second和doCounter()的声明操作。很简单，我们把doCounter前面添加return即可：
//累加器
function counter(){
//秒数
let second = 0;
function doCounter(){
//到达10秒后停止
if(second === 10){
clearInterval(recordSecond);
console.log('计时结束！');
return;
}
second += 1;
console.log(`${second}秒`);
}
return doCounter;
}
const recordSecond = setInterval(function(){
//调用累加器，输出当前秒数
counter();
},1000);
但是执行这段代码，却发现控制台没有输出任何信息。那么问题在哪呢？counter()函数确实执行了，但是它只是拿到了返回的doCounter函数，但并未调用。为了提高可读性，修改如下：
//累加器
function counter(){
//秒数
let second = 0;
function doCounter(){
//到达10秒后停止
if(second === 10){
clearInterval(recordSecond);
console.log('计时结束！');
return;
}
second += 1;
console.log(`${second}秒`);
}
return doCounter;
}
const doCounterFn = counter();
const recordSecond = setInterval(function(){
//调用累加器
doCounterFn();
},1000);
当我们通过doCounterFn 间接调用doCounter时，虽然doCounterFn 的作用域链上并不存在变量second，但doCounter被执行时依旧能访问它的作用域链上的变量，也就是它声明时所在的作用域内的任何变量，这就是作用域延长的典型例子。
通过counter 和 doCounter两个函数嵌套，形成作用域的嵌套，被嵌套函数需要对所在作用域进行访问，再将被嵌套的函数在另一个作用域中调用，这一整个过程就是我们所说的闭包。
3.总结
- 什么时间需要使用闭包？当我们需要重复使用一个对象，但又想保护这个对象不被其他代码污染
- 闭包的作用？使得一个外部函数有权访问一个内部函数作用域。
- 闭包的形成必备条件？需要访问作用域；函数嵌套(物理条件)；被嵌套函数在另一个外部作用域中被调用
- 闭包的缺点？比起普通函数闭包对内存的占用更多，建议使用完毕后，手动标空fn=null
二、参考「每日一题」JS 中的闭包是什么？
function foo(){
var local = 1
function bar(){
local++
return local
}
return bar
}
var func = foo()
func()
1.为什么要函数套函数呢？
是因为需要局部变量，所以才把 local 放在一个函数里，如果不把 local 放在一个函数里，local 就是一个全局变量了，达不到使用闭包的目的——隐藏变量（等会会讲）。这也是为什么我上面要说「运行在一个立即执行函数中」。
有些人看到「闭包」这个名字，就一定觉得要用什么包起来才行。其实这是翻译问题，闭包的原文是 Closure，跟「包」没有任何关系。所以函数套函数只是为了造出一个局部变量，跟闭包无关。
2.为什么要 return bar 呢？
因为如果不 return，你就无法使用这个闭包。把 return bar 改成 window.bar = bar 也是一样的，只要让外面可以访问到这个 bar 函数就行了。所以 return bar 只是为了 bar 能被使用，也跟闭包无关。
三、参考破解前端面试（80% 应聘者不及格系列）：从 闭包说起
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(new Date, i);
}, 1000);
}
console.log(new Date, i);
- A. 20% 的人会快速扫描代码，然后给出结果：0,1,2,3,4,5；
- B. 30% 的人会拿着代码逐行看，然后给出结果：5,0,1,2,3,4；
- C. 50% 的人会拿着代码仔细琢磨，然后给出结果：5,5,5,5,5,5；
只要你对 JS 中同步和异步代码的区别、变量作用域、闭包等概念有正确的理解，就知道正确答案是 C，代码的实际输出是：
2017-03-18T00:43:45.873Z 5
2017-03-18T00:43:46.866Z 5
2017-03-18T00:43:46.868Z 5
2017-03-18T00:43:46.868Z 5
2017-03-18T00:43:46.868Z 5
2017-03-18T00:43:46.868Z 5
接下来我会追问：如果我们约定，用箭头表示其前后的两次输出之间有 1 秒的时间间隔，而逗号表示其前后的两次输出之间的时间间隔可以忽略，代码实际运行的结果该如何描述？会有下面两种答案：
- A. 60% 的人会描述为：5 -> 5 -> 5 -> 5 -> 5，即每个 5 之间都有 1 秒的时间间隔；
- B. 40% 的人会描述为：5 -> 5,5,5,5,5，即第 1 个 5 直接输出，1 秒之后，输出 5 个 5；
这就要求候选人对 JS 中的定时器工作机制非常熟悉，循环执行过程中，几乎同时设置了 5 个定时器，一般情况下，这些定时器都会在 1 秒之后触发，而循环完的输出是立即执行的，显而易见，正确的描述是 B。
1.追问 1：闭包
如果这道题仅仅是考察候选人对 JS 异步代码、变量作用域的理解，局限性未免太大，接下来我会追问，如果期望代码的输出变成：5 -> 0,1,2,3,4，该怎么改造代码？熟悉闭包的同学很快能给出下面的解决办法：
for (var i = 0; i < 5; i++) {
(function(j) { // j = i
setTimeout(function() {
console.log(new Date, j);
}, 1000);
})(i);
}
console.log(new Date, i);
巧妙的利用 IIFE（Immediately Invoked Function Expression：声明即执行的函数表达式）来解决闭包造成的问题，确实是不错的思路，但是初学者可能并不觉得这样的代码很好懂，至少笔者初入门的时候这里琢磨了一会儿才真正理解。
有没有更符合直觉的做法？答案是有，我们只需要对循环体稍做手脚，让负责输出的那段代码能拿到每次循环的 i 值即可。该怎么做呢？利用 JS 中基本类型（Primitive Type）的参数传递是按值传递（Pass by Value）的特征，不难改造出下面的代码：
var output = function (i) {
setTimeout(function() {
console.log(new Date, i);
}, 1000);
};
for (var i = 0; i < 5; i++) {
output(i); // 这里传过去的 i 值被复制了
}
console.log(new Date, i);
能给出上述 2 种解决方案的候选人可以认为对 JS 基础的理解和运用是不错的，可以各加 10 分。当然实际面试中还有候选人给出如下的代码：
for (let i = 0; i < 5; i++) {
setTimeout(function() {
console.log(new Date, i);
}, 1000);
}
console.log(new Date, i);
细心的同学会发现，这里只有个非常细微的变动，即使用 ES6 块级作用域（Block Scope）中的 let 替代了 var，但是代码在实际运行时会报错，因为最后那个输出使用的 i 在其所在的作用域中并不存在，i 只存在于循环内部。能想到 ES6 特性的同学虽然没有答对，但是展示了自己对 ES6 的了解，可以加 5 分，继续进行下面的追问。
2.追问 2：ES6
有经验的前端同学读到这里可能有些不耐烦了，扯了这么多，都是他知道的内容，先别着急，挑战的难度会继续增加。
接着上文继续追问：如果期望代码的输出变成 0 -> 1 -> 2 -> 3 -> 4 -> 5，并且要求原有的代码块中的循环和两处 console.log 不变，该怎么改造代码？新的需求可以精确的描述为：代码执行时，立即输出 0，之后每隔 1 秒依次输出 1,2,3,4，循环结束后在大概第 5 秒的时候输出 5（这里使用大概，是为了避免钻牛角尖的同学陷进去，因为 JS 中的定时器触发时机有可能是不确定的，具体可参见 How Javascript Timers Work）。
顺着下来，不难给出基于 Promise 的解决方案（既然 Promise 是 ES6 中的新特性，我们的新代码使用 ES6 编写是不是会更好？如果你这么写了，大概率会让面试官心生好感）：
const tasks = [];
for (var i = 0; i < 5; i++) { // 这里 i 的声明不能改成 let，如果要改该怎么做？
((j) => {
tasks.push(new Promise((resolve) => {
setTimeout(() => {
console.log(new Date, j);
resolve(); // 这里一定要 resolve，否则代码不会按预期 work
}, 1000 * j); // 定时器的超时时间逐步增加
}));
})(i);
}
Promise.all(tasks).then(() => {
setTimeout(() => {
console.log(new Date, i);
}, 1000); // 注意这里只需要把超时设置为 1 秒
});
相比而言，笔者更倾向于下面这样看起来更简洁的代码，要知道编程风格也是很多面试官重点考察的点，代码阅读时的颗粒度更小，模块化更好，无疑会是加分点。
const tasks = []; // 这里存放异步操作的 Promise
const output = (i) => new Promise((resolve) => {
setTimeout(() => {
console.log(new Date, i);
resolve();
}, 1000 * i);
});
// 生成全部的异步操作
for (var i = 0; i < 5; i++) {
tasks.push(output(i));
}
// 异步操作完成之后，输出最后的 i
Promise.all(tasks).then(() => {
setTimeout(() => {
console.log(new Date, i);
}, 1000);
});
读到这里的同学，恭喜你，你下次面试遇到类似的问题，至少能拿到 80 分。
3.追问 3：ES7
既然你都看到这里了，那就再坚持 2 分钟，接下来的内容会让你明白你的坚持是值得的。
多数面试官在决定聘用某个候选人之前还需要考察另外一项重要能力，即技术自驱力，直白的说就是候选人像有内部的马达在驱动他，用漂亮的方式解决工程领域的问题，不断的跟随业务和技术变得越来越牛逼，究竟什么是牛逼？建议阅读程序人生的这篇剖析。
回到正题，既然 Promise 已经被拿下，如何使用 ES7 中的 async await 特性来让这段代码变的更简洁？你是否能够根据自己目前掌握的知识给出答案？请在这里暂停 1 分钟，思考下。
下面是笔者给出的参考代码：
// 模拟其他语言中的 sleep，实际上可以是任何异步操作
const sleep = (timeountMS) => new Promise((resolve) => {
setTimeout(resolve, timeountMS);
});
(async () => { // 声明即执行的 async 函数表达式
for (var i = 0; i < 5; i++) {
await sleep(1000);
console.log(new Date, i);
}
await sleep(1000);
console.log(new Date, i);
})();
