关于闭包的面试题有哪些

本篇内容介绍了“关于闭包的面试题有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

创新互联长期为上千客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为舞钢企业提供专业的成都网站建设、做网站，舞钢网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

每个 JavaScript 程序员都必须知道闭包是什么。在 JavaScript 面试中，你很可能会被问到闭包的概念。

以下是 7 个有关 JavaScript 闭包的面试题，比较有挑战性。

不要查看答案或运行代码，看看自己的水平到底如何。做完这些题大约需要半小时左右。

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个函数中哪个能够访问外部范围变量?

答案：

• clickHandler 能够从外部作用域访问变量 countClicks。

• immediate 无法访问外部作用域中的任何变量。

• delayedReload 从全局作用域(也就是最外层作用域)中访问全局变量 location。

2. 丢失的参数

下列代码输出什么：

(function immediateA(a) {   return (function immediateB(b) {     console.log(a); // => ?   })(1); })(0);

答案：

• 输出为：0

• 用参数 0 调用 immediateA，因此 a 参数为 0。

• immediateB 函数嵌套在 immediateA 函数中，是一个闭包，它从外部 immediateA作用域中得到 a 变量，其中 a 为 0。因此  console.log(a) 的输出为 0。

3. 谁是谁

下面的代码将会输出什么内容?

let count = 0; (function immediate() {   if (count === 0) {     let count = 1;     console.log(count); // 输出什么？   }   console.log(count); // 输出什么？ })();

答案：

• 输出 1 和 0

• 第一个语句 let count = 0 声明了一个变量 count。

• immediate() 是一个闭包，它从外部作用域得到 count 变量。在 immediate() 函数作用域内， count 是 0。

但是，在条件内，另一个 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。

• 代码分为两个阶段执行。

阶段1：

• for() 重复 3 次。在每次循环都会创建一个新函数 log()，该函数将捕获变量 i。setTimout() 安排log() 在 1000  毫秒后执行。

• 当 for() 循环完成时，变量 i 的值为 3。

阶段2：

第二阶段发生在 1000ms 之后：

• setTimeout() 执行预定的 log() 函数。log() 读取变量 i 当前的值 3，并输出 3

• 所以输出 3, 3, 3。

5. 错误的信息

下面的代码将会输出什么：

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。

• message 变量存在于 createIncrement() 函数的作用域内。其初始值为 'Count is 0'。但即使 count  变量已经增加了几次，message 变量的值也始终为 'Count is 0'。

• log() 函数是一个闭包，它从 createIncrement() 作用域中获取 message 变量。console.log(message)  输出录'Count is 0'到控制台。

6. 重新封装

下面的函数 createStack() 用于创建栈结构：

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]; // 栈结构的封装被破坏了

它能正常工作，但有一个小问题，因为暴露了 stack.items 属性，所以任何人都可以直接修改 items 数组。

这是一个大问题，因为它破坏了栈的封装：应该只有 push() 和 pop() 方法是公开的，而 stack.items  或其他任何细节都不能被访问。

使用闭包的概念重构上面的栈实现，这样就无法在 createStack() 函数作用域之外访问 items 数组：

function createStack() {   // 把你的代码写在这里 }  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() 作用域内。

这样修改后，从 createStack() 作用域的外部无法访问或修改 items 数组。现在 items 是一个私有变量，并且栈被封装：只有  push() 和 pop() 方法是公共的。

push() 和 pop() 方法是闭包，它们从 createStack() 函数作用域中得到 items变量。

7. 智能乘法

编写一个函数 multiply() ，将两个数字相乘：

function multiply(num1, num2) {   // 把你的代码写在这里... }

要求：

如果用 2 个参数调用 multiply(num1，numb2)，则应返回这 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

答案：

以下是 multiply() 函数的一种实现方式：

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 变量。

“关于闭包的面试题有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！