共计 4130 个字符,预计需要花费 11 分钟才能阅读完成。
更多文章详见公众号【前端 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
不拜访内部作用域的任何变量。delayedReload
location
从全局作用域拜访全局变量。
</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