閉包是什么是每一位Javascript程序員必須要了解知道的，在日后我們的面試中，這類相關(guān)的問(wèn)題肯定是必不可少的，不深入了解的話是很容易被問(wèn)倒的，一下是小編整理的幾個(gè)Javascript閉包面試問(wèn)題，大家看看會(huì)不會(huì)呢：

1. 熱身

有以下函數(shù) 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個(gè)函數(shù)中哪個(gè)能夠訪問(wèn)外部范圍變量?

答案

• clickHandler 能夠從外部作用域訪問(wèn)變量 countClicks。
• immediate 無(wú)法訪問(wèn)外部作用域中的任何變量。
• delayedReload 從全局作用域(也就是最外層作用域)中訪問(wèn)全局變量 location。

2. 丟失的參數(shù)

下列代碼輸出什么：

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

答案

輸出為：0

用參數(shù) 0 調(diào)用 immediateA，因此 a 參數(shù)為 0。

immediateB 函數(shù)嵌套在 immediateA 函數(shù)中，是一個(gè)閉包，它從外部 immediateA 作用域中得到 a 變量，其中 a 為 0。因此 console.log(a) 的輸出為 0。

3. 誰(shuí)是誰(shuí)

下面的代碼將會(huì)輸出什么內(nèi)容?

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

答案

輸出 1 和 0

第一個(gè)語(yǔ)句 let count = 0 聲明了一個(gè)變量 count。

immediate() 是一個(gè)閉包，它從外部作用域得到 count 變量。在 immediate() 函數(shù)作用域內(nèi)， count 是 0。

但是，在條件內(nèi)，另一個(gè) let count = 1 聲明了局部變量 count，該變量覆蓋了作用域之外的 count。第一個(gè) console.log(count) 輸出 1。

第二個(gè) console.log(count) 輸出為 0 ，因?yàn)檫@里的 count 變量是從外部作用域訪問(wèn)的。

4. 棘手的閉包

下列代碼輸出什么：

for (var i = 0; i < 3; i++) {
  setTimeout(function log() {
    console.log(i); // => ?
  }, 1000);
}

答案

輸出：3, 3, 3。

代碼分為兩個(gè)階段執(zhí)行。

階段1

1. for() 重復(fù) 3 次。在每次循環(huán)都會(huì)創(chuàng)建一個(gè)新函數(shù) log()，該函數(shù)將捕獲變量 i。 setTimout() 安排log() 在 1000 毫秒后執(zhí)行。
2. 當(dāng) for() 循環(huán)完成時(shí)，變量 i 的值為 3。

階段2

第二階段發(fā)生在 1000ms 之后：

• setTimeout() 執(zhí)行預(yù)定的 log() 函數(shù)。 log() 讀取變量 i 當(dāng)前的值 3，并輸出 3

所以輸出 3, 3, 3。

5. 錯(cuò)誤的信息

下面的代碼將會(huì)輸出什么：

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() 函數(shù)被調(diào)用 3 次，將 count 增加到 3。

message 變量存在于 createIncrement() 函數(shù)的作用域內(nèi)。其初始值為 'Count is 0'。但即使 count 變量已經(jīng)增加了幾次，message 變量的值也始終為 'Count is 0'。

log() 函數(shù)是一個(gè)閉包，它從 createIncrement() 作用域中獲取 message 變量。 console.log(message) 輸出錄'Count is 0'到控制臺(tái)。

以上就是“JS閉包面試題，看看你會(huì)多少”，你能回答上來(lái)嗎?如果想要了解更多的Java面試題相關(guān)內(nèi)容，可以關(guān)注動(dòng)力節(jié)點(diǎn)Java官網(wǎng)。