关于闭包的7道面试题

关于闭包的7道面试题

每个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 个函数中的哪一个访问外部作用域变量？

​​countClicks​​的countClicks从外部作用域访问变量。​​immediate​​ 不访问外部作用域的任何变量。​​delayedReload​​​​location​​从全局作用域访问全局变量。

2.参数丢失

以下代码会在控制台打印什么？

(function immediateA(a) { return (function immediateB(b) { console.log(a); // 会打印什么? })(1);})(0);

函数immediateA使用参数0调用，因此参数a为0。 嵌套在immediateA 函数中的immediateB 函数是一个闭包，它从外部immediateA 作用域捕获一个变量a。因此console.log(a) 打印0。

3.谁的谁

以下代码会在控制台打印什么？

let count = 0;(function immediate() { if (count === 0) { let count = 1; console.log(count); // 打印什么? } console.log(count); // 打印什么?})();

第二个 console.log(count) 打印 0，因为这里的 count 变量是从外部作用域访问的。

4.棘手的闭包

以下代码会在控制台打印什么？

for (var i = 0; i < 3; i++) { setTimeout(function log() { console.log(i); // 会打印什么? }, 1000);}

代码片段分 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 值？

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(); // 会打印什么?

createIncrement()函数的作用域内的message变量。它的初始值是“'Count is 0'”。 然而，即使count变量已经增加了几次，message变量也始终保持“'Count is 0'”。

log() 函数是一个从 createIncrement() 范围捕获​​message​​变量的闭包。 console.log(message) 将“Count is 0”打印到控制台。

附带挑战：如何修复 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(); // => 5stack.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(); // => 5stack.items; // => undefined

这是一个重构的​​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(); // => 5stack.items; // => undefined

​​items​​已移至返回的对象之外。

由于此更改，从​​createStack()​​​作用域外部无法访问或修改​​items​​​数组。​​items​​​现在是私有变量，堆栈被封装：只有​​push()​​​和​​pop()​​方法是公共的。

​​push()​​​和​​pop()​​​方法，作为闭包，从​​createStack()​​​函数作用域捕获变量​​items​​。

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); // => 20multiply(3, 3); // => 9const double = multiply(2);double(5); // => 10double(11); // => 22

function multiply(number1, number2) { if (number2 !== undefined) { return number1 * number2; } return function doMultiply(number2) { return number1 * number2; };}multiply(4, 5); // => 20multiply(3, 3); // => 9const double = multiply(2);double(5); // => 10double(11); // => 22

如果​​number2​​​参数不是​​undefined​​​，则函数简单地返回​​number1 * number2​​。

但如果​​number2​​​是​​undefined​​​，则表示该​​multiply()​​​函数被一个参数的方式调用。在这种情况下，我们返回一个函数​​doMultiply()​​，稍后调用时执行实际的乘法。

​​doMultiply()​​​是一个闭包，因为它​​从​​​multiply()​​作用域中捕获变量number1​​。

总结

如果您正确回答了 5 个或更多问题，您就对闭包有很好的理解但是，如果您正确回答的问题少于 5 个问题，则需要好好复习一下闭包。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。