2024年关于闭包的7道面试题，web接口开发

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：

凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。

入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。

if (count === 0) {

let count = 1;

console.log(count); // 打印什么?

}

console.log(count); // 打印什么?

})();

▼点击查看答案 控制台会打印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 变量是从外部作用域访问的。

4.棘手的闭包

---

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

for (var i = 0; i < 3; i++) {

setTimeout(function log() {

console.log(i); // 会打印什么?

}, 1000);

}

▼点击查看答案 `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 值？

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

▼点击查看答案 ‘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”打印到控制台。

附带挑战：如何修复 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

▼点击查看答案

这是一个重构的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。

7.智能乘法

---

编写一个multiply()将 2 个数字相乘的函数：

function multiply(num1, num2) {

// Write your code here…

}

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法