更多文章详见公众号【前端css和js干货】
每个JavaScript开发人员都必须知道闭包是什么。在JavaScript编码面试中，闭包经常被问及。
本文整理了一份关于JavaScript 闭包的 7 个有趣且难度递增的问题的清单。
拿一支铅笔和一张纸，试着在不看答案或运行代码的情况下回答问题。可能需要大约 30 分钟。
1.访问外部作用域变量
考虑以下函数clickHandler, immediate, 和delayedReload：
let countClicks = 0;
button.addEventListener('click', function clickHandler() {
countClicks++;
});
const result = (function immediate(number) {
const message = `number is: ${number}`;
return message;
})(100);
setTimeout(function delayedReload() {
location.reload();
}, 1000);
这 3 个函数中的哪一个访问外部作用域变量？
<details>
<summary>▼点击查看答案</summary>
-
countClicks的countClicks从外部作用域访问变量。 -
immediate不访问外部作用域的任何变量。 -
delayedReloadlocation从全局作用域访问全局变量。
</details>
2.参数丢失
以下代码会在控制台打印什么？
(function immediateA(a) {
return (function immediateB(b) {
console.log(a); // 会打印什么?
})(1);
})(0);
<details>
<summary>▼点击查看答案</summary>
控制台会打印0。
函数immediateA使用参数0调用，因此参数a为0。
嵌套在immediateA 函数中的immediateB 函数是一个闭包，它从外部immediateA 作用域捕获一个变量a。因此console.log(a) 打印0。
</details>
3.谁的谁
以下代码会在控制台打印什么？
let count = 0;
(function immediate() {
if (count === 0) {
let count = 1;
console.log(count); // 打印什么?
}
console.log(count); // 打印什么?
})();
<details>
<summary>▼点击查看答案</summary>
控制台会打印1和0。
第一条语句 let count = 0 声明了一个变量 count。
immediate() 是一个从外部作用域捕获count变量的闭包。 在immediate() 函数内部作用域count变量为0。
然而，在if语句中，另一个 let count = 1 声明了一个局部变量 count，它覆盖了作用域外的 count。 所以第一个 console.log(count) 记录 1。
第二个 console.log(count) 打印 0，因为这里的 count 变量是从外部作用域访问的。
</details>
4.棘手的闭包
以下代码会在控制台打印什么？
for (var i = 0; i < 3; i++) {
setTimeout(function log() {
console.log(i); // 会打印什么?
}, 1000);
}
<details>
<summary>▼点击查看答案</summary>
3, 3,3 会被打印到控制台。
代码片段分 2 个阶段执行。
阶段1
for() 迭代 3 次。 在每次迭代期间，都会创建一个新函数 log()，该函数捕获变量 i。 setTimout() 安排 log() 在 1000 毫秒后执行。
当 for() 循环完成时，i 变量的值为 3。
阶段2
第二阶段发生在 1000 毫秒后：
setTimeout() 执行队列中的 log() 函数。 log() 读取变量 i 的当前值，即 3，并打印到控制台 3。
这就是为什么 3, 3, 3 被打印到控制台的原因。
附带挑战：如何修复此示例以在经过 1 秒后打印 0、1、2 值？
</details>
5.正确或错误的message
以下代码会在控制台打印什么？
function createIncrement() {
let count = 0;
function increment() {
count++;
}
let message = `Count is ${count}`;
function log() {
console.log(message);
}
return [increment, log];
}
const [increment, log] = createIncrement();
increment();
increment();
increment();
log(); // 会打印什么?
<details>
<summary>▼点击查看答案</summary>
'Count is 0' 被打印到控制台。
increment() 函数已被调用 3 次，将 count 增加到值 3。
createIncrement()函数的作用域内的message变量。它的初始值是“'Count is 0'”。 然而，即使count变量已经增加了几次，message变量也始终保持“'Count is 0'”。
log() 函数是一个从 createIncrement() 范围捕获message变量的闭包。 console.log(message) 将“Count is 0”打印到控制台。
</details>
附带挑战：如何修复 log() 函数以返回具有实际Count的message变量值？
6.恢复封装
function createStack() {
return {
items: [],
push(item) {
this.items.push(item);
},
pop() {
return this.items.pop();
}
};
}
const stack = createStack();
stack.push(10);
stack.push(5);
stack.pop(); // => 5
stack.items; // => [10]
stack.items = [10, 100, 1000]; // 破坏了封装!
堆栈按预期工作，但有一个小问题。任何人都可以直接修改 items 数组，因为stack.items属性是公开的。
这是一个问题，因为它破坏了堆栈的封装：应该只有push()和pop()方法是公共的，stack.items或者任何其他细节都不应该被外部访问。
使用闭包重构上面的堆栈实现，这样就无法在函数createStack()作用域之外访问数组items ：
function createStack() {
// Write your code here...
}
const stack = createStack();
stack.push(10);
stack.push(5);
stack.pop(); // => 5
stack.items; // => undefined
<details>
<summary>▼点击查看答案</summary>
这是一个重构的createStack()：
function createStack() {
const items = [];
return {
push(item) {
items.push(item);
},
pop() {
return items.pop();
}
};
}
const stack = createStack();
stack.push(10);
stack.push(5);
stack.pop(); // => 5
stack.items; // => undefined
items已移至返回的对象之外。
由于此更改，从createStack()作用域外部无法访问或修改items数组。items现在是私有变量，堆栈被封装：只有push()和pop()方法是公共的。
push()和pop()方法，作为闭包，从createStack()函数作用域捕获变量items。
</details>
7.智能乘法
编写一个multiply()将 2 个数字相乘的函数：
function multiply(num1, num2) {
// Write your code here...
}
如果multiply(num1, numb2)用 2 个参数调用，它应该返回 2 个参数的乘积。
但是如果用 1 个参数调用，该函数应该返回另一个函数const anotherFunc = multiply(num1)。调用时返回的函数anotherFunc(num2)执行乘法num1 * num2。
multiply(4, 5); // => 20
multiply(3, 3); // => 9
const double = multiply(2);
double(5); // => 10
double(11); // => 22
<details>
<summary>▼点击查看答案</summary>
function multiply(number1, number2) {
if (number2 !== undefined) {
return number1 * number2;
}
return function doMultiply(number2) {
return number1 * number2;
};
}
multiply(4, 5); // => 20
multiply(3, 3); // => 9
const double = multiply(2);
double(5); // => 10
double(11); // => 22
如果number2参数不是undefined，则函数简单地返回number1 * number2。
但如果number2是undefined，则表示该multiply()函数被一个参数的方式调用。在这种情况下，我们返回一个函数doMultiply()，稍后调用时执行实际的乘法。
doMultiply()是一个闭包，因为它从multiply()作用域中捕获变量number1。
</details>
总结
将您的答案与帖子中的答案进行比较：
- 如果您正确回答了 5 个或更多问题，您就对闭包有很好的理解
- 但是，如果您正确回答的问题少于 5 个问题，则需要好好复习一下闭包。
作者：Dmitri Pavlutin 译者：前端css和js干货 来源：dmitripavlutin
