2023比较难搞的Javascript闭包面试题

每一个JavaScript程序员都是必须知道闭包是什么，闭包是函数式编程的核心概念之一，是引用了一个函数作为域中变量的函数，简单来说就是函数A用到了B函数中的变量，那么函数A就是个闭包。在我们面试相关岗位的时候，是有很大几率问到有关问题的，为此，大家也需要作出准备，这几个闭包面试题，可以参考下，非常具有挑战性的。

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'到控制台。

以上就是2023比较难搞的五个Javascript闭包面试题，你能回答上来吗？如果想要了解更多的相关内容，可以关注极悦Java官网。