闭包 (closure) 是程序语言的一种特性，在 JavaScript 中也扮演相当重要的角色，被广泛应用在 JavaScript 程序库中。许多被开发者大量使用的重要功能，也都看得到闭包的身影，举例来说最热门的 JavaScript 函数库 React 中的 useState 就是通过闭包来实现。
以面试的角度来说，不仅仅要了解什么是闭包，同时也要知道闭包会有什么应用的情景。假如你目前仍不熟闭包的概念，或不确定可以怎么应用，千万要在面试前弄熟。
什么是闭包？
在 MDN 文档中，闭包被定义为函数以及该函数被声明时所在的作用域环境 (lexical environment) 的组合。白话一点说，闭包就是内部函数能够取得函数外部的变量，并且记住这个变量。因为能够记住这个外部变量，闭包很常被用来做状态保存。
以下是一个最简单的例子，在下方代码中的 inner 函数，能拿到外部函数 outer 的 a 变量，并将其保存在内存中。当我们调用 inner 时，之所以不是每次都返回 1 ，而是返回 1、 2、 3 不断加上去，正是因为之前的 a 的状态被记住了。
function outer() {
let a = 0;
function inner() {
a += 1;
console.log(a);
}
return inner;
}
const inner = outer();
inner(); // 1
inner(); // 2
inner(); // 3
我们可以理解成：闭包这种特性，可以让我们在一个内层函数中 (这边的 inner)，访问到外部函数的作用域 (这边的 outer)，并且会记住外部函数的变量 (这边的 a)。
在了解闭包是什么后，接着我们来看看闭包的实际用途。
闭包的应用 1 — 状态保存
在写程序时，我们很常会需要记住某个状态，JavaScript 的热门函数库 React 就有提供一个 useState 让开发者来管理状态。以下我们模拟一个简化版的 useState ，可以在下方的代码看到， getState 与 setState 作为内部函数，可以取得外部函数当中的 state，在实际调用后，如果这个 state 有改变， getState 可以持续取得最新改变的值。
// 因为闭包的关系，getState 与 setState 可以取得与记得 state
function useState(initialState) {
let state = initialState;
function getState() {
return state;
}
function setState(updatedState) {
state = updatedState;
}
return [getState, setState];
}
const [count, setCount] = useState(0);
count(); // 0
setCount(1);
count(); // 1
setCount(500);
count(); // 500
又或者先前 React 核心团队成员 Sebastian Markbåge 分享的一段代码，在说 React 的 Server Actions 中，可以运用闭包来做版本检查。下面这段代码 verifiedVersion 记住的是在首次渲染时拿到的版本，因为闭包的关系，内部的函数 publish 函数，能取得 verifiedVersion
这时，如果要做版本检查，可以在 publish 里面再调用一次 await getVersion，拿到当下的版本。这时就可以比较首次渲染时的版本，以及当下的版本，并当版本不同时，可以做处理 (这边是返回一个错误信息)
闭包的应用 2：缓存机制
因为闭包可以让内部函数记住外部的变量，我们可以依照这个特性，通过闭包来实现缓存机制。以下面的例子来说，因为闭包原理， cache 变量可以被返回的箭头函数取得与记得，所以我们能够重复用 cache 来放想要缓存的东西。
function cached(fn) {
const cache = {};
// 被返回的箭头函数，可以取得外面的 cache 变量，同时记住这个变量
// 因此可以把这个 cache 拿来存已经计算的结果
return (...args) => {
// 把输入字符串化并当成 key
const key = JSON.stringify(args);
// 如果 key 已经在 cache 中，则不用重复算，直接返回之前存的运算结果
// 如果 key 还不在，则运算完后，把 key 与运算结果放到 cache 中，未来可以避免重复运算
if (key in cache) {
return cache[key];
} else {
const val = fn(...args);
cache[key] = val;
return val;
}
};
}
闭包的应用 3：模拟私有变量
许多程序语言有声明私有方法的语法，这些私有变量对于外部来讲是隐藏的，这是一项很重要的特性，因为有时候我们在开发的代码内部细节，并不想让外部来获取。JavaScript 并不支持私有变量，但我们可以通过闭包做出类似的功能。如下方代码示例：
// privateCounter 没被法被外部修改，
// 因为闭包的关系 increment 与 decrement 可以存取到 privateCounter
// 因此 privateCounter 只能够通过 increment 与 decrement 来改，这能有效避免被误触到
var counter = (function () {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function () {
changeBy(1);
},
decrement: function () {
changeBy(-1);
},
value: function () {
return privateCounter;
},
};
})();
console.log(counter.value()); // logs 0
counter.increment();
counter.increment();
console.log(counter.value()); // logs 2
counter.decrement();
console.log(counter.value()); // logs 1
闭包缺点 — 内存泄漏
虽然说闭包很好用，但也不是没有缺点。从内存的角度来看，闭包的缺点是显而易见的，由于闭包会让内部函数记得外部的变量，这可能会造成变量常驻在内存当中，如果使用过多可能会造成内存泄露 (memory leak)，需要小心使用。
以下面的例子来说， longArray 没有被使用到，但是因为闭包的原因会一直被 addNumbers 记住。假如今天 longArray 有被使用，那就没问题，但因为它没有被用到但仍存在于内存中没被清除，这种情况就是典型的内存泄漏。
function outer() {
const longArray = [];
return function inner(num) {
longArray.push(num);
};
}
const addNumbers = outer();
for (let i = 0; i < 100000000; i++) {
addNumbers(i);
}
