🌰：某一天，总监通知你，需要在公司页面上显示一个浏览时间，从打开页面的瞬间开始计时，每过一秒钟加一。
好，接到活，开始分析题干
这个业务的本质就是实现一个累加器，每过一秒钟自增一次。好的，我们开始依次实现。
首先，最简单的“每隔一秒加一“，我们立刻就能想到设置一个定时器，每隔 1 秒钟调用一次累加器，假设累加器的函数叫 counter，胸有成竹的写下代码。
setInterval(function () {
// 调用累加器
counter();
}, 300);
调用累加器的逻辑我们已经写好了，接下来因为需要显示秒数，所以我们得定义一个变量用来存放秒数。并且在累加器里对它进行自增操作。继续完整代码。
// 秒数
let second = 0;
// 累加器
function counter() {
second += 1;
}
setTimeInterval(function () {
// 调用累加器
counter();
}, 300);
解决业务的关键代码我们已经写好了，因为本文的主旨是带大家理解闭包，所以把秒数（second）显示在页面上的代码我们就不写了。为了验证代码是否正确，我们可以在最后打印一下 second 的值，并且为了不浪费空间，我们在测试时加一个临时条件 到达 10 秒时停止累加，修改下我们的代码
// 秒数
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);
我们将代码在控制台上测试一下，结果如下：
可以看到我们已经实现了所需要的功能，这也是最低级的实现方法。
为什么说是最低级的呢，因为我们实现功能的思路是定义了一个全局变量，每次累加都是更新这个全局变量，而所有编程语言中有一条不成文的铁律————尽可能的少定义全局变量。
大致有两个原因，一难以控制，二占用内存。
1.全局变量不好控制，可以在任何地方进行读写，意味着可能会被不相干的程序改写。
2.全局变量占用内存的生命周期长，一般局部变量（定义在函数中的变量），在函数调用完成后与之对应的执行环境会被推出执行栈，回收机制会每隔一段时间进行一次回收操作，释放不需要被占用的内存。执行环境出栈就是在告诉回收机制“这些变量我不需要了，可以回收了”。而全局变量因为随时可以被任何程序在任何地方读写，所以回收机制很难统计何时需要释放全局变量所占用的内存，也就导致全局变量一般是在全局执行环境被销毁时才会释放。
经过上面的一番赘述，我们接下来需要做的就是实现功能的同时，避免定义全局变量污染环境。
接着上面的代码，我们需要改变的就是将定义在全局的second改为局部变量，从而保护 second 不会受其他操作的影响。思考一下该把 second 声明在哪里...
因为我们要将 second 定义为局部变量，我们先优化下刚刚的代码，将 second 的读写尽量写在一个函数内部便于维护。
首先，将判断停止定时任务的条件放在 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);
我们将代码在控制台上测试一下是否正常，结果如下：
好，现在我们的代码比第一版更清晰了一些，在定时任务的回调函数中只负责调用累加器，何时停止累加和执行累加都交给 counter 去控制。
接下来，我们继续上面的步骤 —— 将 second 定义为局部变量，因为 setInterval 的回调函数每隔一秒都会被执行一次，若 second 声明在回调函数中，每次回调函数被调用的同时 second 就会被初始化，那么就实现不了累加的效果了。
因此，我们考虑将 second 声明在 counter 函数内部，代码如下
// 累加器
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 中，也避免不了被初始化的操作。
思考一下，如何将 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 的内部函数，所以有权访问外部函数作用域中的变量。
但是目前的代码存在一个问题，我们只是将累加相关操作整理在了一个函数中，但是我们没有将这个函数返回，那么就算 counter 被调用，也只是执行了对其内部变量 second 和函数 doCounter 的声明操作。
很简单，我们将 doCounter 函数作为 counter 函数的返回值，那么 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 recordSecond = setInterval(function () {
// 调用累加器，输出当前秒数
counter();
}, 1000);
我们将代码复制到控制台测试一下，咦，奇怪的事情发生了，控制台居然没有输出任何信息...
证明 doCounter 并没有被正确执行。观察一下代码，找找问题在哪。
我们重点看下 counter 函数的 return 部分，
// 累加器
function counter() {
// 秒数
let second = 0;
function doCounter() {
// 到达10秒后停止
if (second === 10) {
clearInterval(recordSecond);
console.log('计时结束!');
return;
}
second += 1;
console.log(`${second}秒`);
}
return doCounter;
}
我们知道定时任务的回调函数在未达到销毁条件时是一定会被执行的，那么对 counter 函数的调用也一定被执行了。
我们将 doCounter 函数作为了 counter 函数的返回值，那么通过 counter 函数的调用就可以得到 counter 函数的返回内容，问题就在这里!!
我们只是将 doCounter 函数返回了，counter 函数的调用也只是拿到了这个返回的 doCounter 函数，但 doCounter 并没有被任何一处调用。
为了提高可读性，我们将调用 counter 函数可得到的返回内容赋值给一个变量 doCounterFn，而 doCounterFn 才是真正做累加相关操作的函数，也就是 setInterval 中回调函数真正需要关心的内容。继续修改下代码，如下
// 累加器
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 两个函数嵌套，形成作用域的嵌套，被嵌套函数需要对所在作用域进行访问，再将被嵌套的函数在另一个作用域中调用，这一整个过程就是我们所说的闭包。
我们将上面的代码运行测试一下，结果如下：
到此我们已经相对完美的实现了需求，
也通过这个例子对闭包形成的过程做了一个了解，最后我们对闭包做一下总结：
1.什么时候需要使用闭包
当我们需要重复使用一个对象，但又想保护这个对象不被其他代码污染。
2.闭包的作用
使得一个外部函数有权访问一个内部函数作用域。
3.闭包的形成必备条件
- 需要访问作用域
- 函数嵌套（形成闭包的物理条件）
- 被嵌套函数在另一个外部作用域中被调用
4.闭包的缺点
比起普通函数闭包对内存的占用更多，因此建议在使用完毕后，可以手动赋空标记可以回收fn = null。
到此本文就结束啦，能坚持看完的小伙伴们必成大才！
