文列舉了一些常見但容易出錯的JavaScript面試問題，并提供了相應的解釋和示例代碼。這篇文章的目標是幫助讀者更好地理解這些問題，以便在JavaScript面試中更好地回答它們。

事件循環 Event loop

很難想象有哪個JavaScript面試不會提到事件循環這個主題。這并非沒有道理，這個主題確實是非?；A的，并且每天都被React、Vue、你用的任何框架的開發者所使用。

小測驗1：只有18%的正確答案

作為示例，我們選擇了一個看似涵蓋了這個主題所有方面的小測驗。

嘗試自己做一下，并閱讀解釋:

setTimeout(() => console.log(1), 0);

console.log(2);

new Promise(res => {
  console.log(3)
  res();
}).then(() => console.log(4));

console.log(5);

解釋：

在這個例子中，我們看到了 setTimeout、Promise 以及一些同步代碼。

一個正確回答了這個測驗的開發者的內部對話可能是這樣的：

給定 0 延遲，我們傳遞給 setTimeout 的函數會同步調用還是異步調用？

盡管 setTimeout 函數有零延遲，回調函數是異步調用的。引擎會將回調函數放在回調隊列（宏任務隊列）中，并在調用棧為空時將其移至調用棧。因此，數字 1 將被跳過，數字 2 將首先在控制臺中顯示。

我們作為參數傳遞給 Promise 構造函數的函數會同步調用還是異步調用？

Promise 構造函數接受的函數參數是同步執行的。因此，在控制臺中接下來要顯示的數字是 3。 給定零延遲，我們傳遞給 promise 的 then 處理程序的函數會同步調用還是異步調用？

then方法中的回調是異步執行的，即使 promise 沒有延遲就解決了。與 setTimeout 不同的是，引擎會將 promise 回調放在另一個隊列中 —— 工作隊列（微任務隊列），在那里它將等待執行。因此，接下來進入控制臺的數字是 5。

哪個優先級更高 —— 微任務隊列還是宏任務隊列，換句話說 —— Promise 還是 setTimeout？

微任務（Promise）比宏任務（setTimeout）有更高的優先級，所以下一個在控制臺中的數字將是4，最后一個是1。

通過分析回應，我們可以得出結論，大多數受訪者在假設傳遞給 Promise 構造函數作為參數的執行器函數是異步調用的方面是錯誤的（44%的人選擇了這個選項）。

上下文（Context）

關于上下文的問題甚至可能會難倒經驗豐富的開發者。例如，只有29%的開發者解決了這個復雜但本質上很簡單的任務。

小測驗1：只有29%的正確答案

嘗試自己做一下，并閱讀解釋:

'use strict';

function foo() {
  console.log(this);
}

function callFoo(fn) {
  fn();
}

let obj = { foo };

callFoo(obj.foo);

解釋：

this 的值是在函數被調用時設定的。

在示例中，obj.foo 函數作為一個參數傳遞給另一個 callFoo 函數，后者在沒有上下文的情況下調用它。

在普通模式下，當沒有執行上下文并且代碼在瀏覽器環境中運行時，this 指向 window 對象，在嚴格模式下，它是 undefined。

正確答案是 undefined。

小測驗2：只有28%的正確答案

另一個常見的面試問題是箭頭函數內部 this 的值。

'use strict';
var x = 5;
var y = 5;

function Operations(op1 = x, op2 = y) {
  this.x = op1;
  this.y = op2;
};

Operations.prototype.sum = () => this.x + this.y;

const op = new Operations(10, 20);

console.log(op.sum());

嘗試自己做一下，并閱讀解釋。

解釋：

箭頭函數沒有自己的 this。相反，箭頭函數體內的 this 指向該箭頭函數定義所在作用域的this 值。

我們的函數是在全局作用域中定義的。

全局作用域中的 this 指向全局對象（即使在嚴格模式下也是如此）。因此，答案是 10。

小測驗2：只有39%的正確答案

另一個關于箭頭函數的問題可能是這樣的。

const Num = () => {
  this.getNum = () => 10;
}

Num.prototype.getNum = () => 20;

const num = new Num();

console.log(num.getNum());

嘗試自己做一下，并閱讀解釋。

解釋：

箭頭函數不能用作構造函數，當使用 new 調用時會拋出錯誤。它們也沒有原型屬性：

TypeError：無法設置undefined的屬性（設置'getNum'）

這樣的問題比較少見，但你應該為它們做好準備。你可以在 MDN 上查看更多關于箭頭函數的信息。

變量作用域

這個主題值得探討，不僅因為它在面試中很受歡迎，而且還有實際應用的原因。如果你能很好地理解變量作用域，那么你將節省大量的調試代碼的時間。

讓我們看一些常見的例子。

小測驗1：只有38%的正確答案

'use strict';

console.log(foo());

let bar = 'bar';

function foo() {
  return bar;
}

bar = 'baz';

嘗試自己做一下，并閱讀解釋。

解釋：

在 let / const 變量定義之前的作用域中的位置被稱為臨時死區。

如果我們在 let / const 變量定義之前嘗試訪問它們，將會拋出引用錯誤。

要輕松記住一種編程語言是如何工作的，了解為什么它是這樣工作的會很有幫助（簡單吧！）。

這種行為是因為 const 變量而被選中的。訪問未定義的 var 變量時，我們得到的是undefined。對于 const 變量來說，這是不可接受的，因為它將不再是一個常量。

let 變量的行為以類似的方式完成，以便您可以輕松地在這兩種類型的變量之間切換。

回到我們的例子。

由于函數調用在 bar 變量的定義之上，該變量處于臨時死區。

代碼拋出一個錯誤：

ReferenceError：初始化前不能訪問'bar'

小測驗2：只有33%的正確答案

let func = function foo() {
  return 'hello';
}

console.log(typeof foo);

嘗試自己做一下，并閱讀解釋。

解釋：

在命名函數表達式中，名稱只在函數體內部是局部的，外部無法訪問。因此，全局作用域中不存在foo。

typeof運算符對未定義的變量返回undefined。

小測驗3：只有36%的正確答案

以下示例不推薦在實際生活中使用，但你應該知道這段代碼至少會如何工作，以滿足面試官的興趣。

function foo(bar, getBar = () => bar) {
  var bar = 10;
  console.log(getBar());
}

foo(5);

嘗試自己做一下，并閱讀解釋。

解釋：

對于具有復雜參數（解構、默認值）的函數，參數列表被封閉在其自己的作用域內。

因此，在函數體中創建 bar 變量不會影響參數列表中同名的變量，getBar() 函數通過閉包從其參數中獲取 bar。

一般來說，我們注意到盡管ES6已經發布了7年多，但開發人員對其特性的理解仍然很差。當然，每個人都知道這個版本中特性的語法，但只有少數人能更深入地理解它。

ES6模塊。

如果你是面試官，并且由于某種原因你不喜歡候選人，那么模塊絕對可以幫你讓任何人都失敗。

為了這篇文章的目的，我們選擇了關于這個主題最簡單的任務之一。但相信我們，ES6模塊要復雜得多。

小測驗1：只有41%的正確答案

console.log('index.js');

import { sum } from './helper.js';

console.log(sum(1, 2));

嘗試自己做一下，并閱讀解釋。

解釋

導入會被提升。

提升是JS中的一種機制，其中變量和函數聲明在代碼執行之前被移動到它們的作用域的頂部。

所有依賴項將在代碼運行之前加載。

所以，答案是：helper.js index.js 3

提升

另一個熱門的面試題目是提升。

小測驗1：只有40%的正確答案

盡管選定的小測驗與現實脫節，但它完美地解釋了提升的機制。如果你明白這段代碼是如何工作的，你幾乎不應該在其他所有有關提升的問題上遇到任何問題。

'use strict';

var num = 8;

function num() {
  return 10;
}

console.log(num);

嘗試自己做一下，并閱讀解釋。

解釋

函數和變量聲明被放在其作用域的頂部，變量的初始化發生在腳本執行時。

具有相同名稱的變量的重復聲明將被跳過。

函數總是首先被提升。無論函數和具有相同名稱的變量的聲明在代碼中以何種順序出現，函數都優先，因為它上升得更高。

示例1

function num() {}
var num;
console.log(typeof num); // function

示例2

var num;
function num() {}
console.log(typeof num); // function

變量總是在最后被初始化。

var num = 8; function num() {}

將被轉換為：

function num() {}
var num; // repeated declaration is ignored
num = 8;

結果，num = 8。

小測驗2：只有12%的正確答案

還記得我們說模塊很難嗎？模塊加上提升可以讓任何程序員的腦袋都要爆炸。

import foo from './module.mjs';

console.log(typeof foo);

foo = 25;

export default function foo() {}

嘗試自己做一下，并閱讀解釋。

解釋

export default function foo() {}

等于

function foo() {}
export { foo as default }

現在是時候記住函數是被提升的，變量初始化總是在函數/變量聲明之后發生。

在引擎處理完模塊代碼后，你可以將其想象成以下形式：

function foo() {}
foo = 25;
export { foo as default }

所以正確答案是數字。

Promises

程序員對promises的主題了解得比他們自己認為的要好。這個主題上的面試問題通常是最基礎的，大多數人都能應對。但我們仍然不能繞過它，因為面試官也是如此。

小測驗1：46%的正確答案

嘗試自己做一下，并閱讀解釋。

Promise.resolve(1)
  .then(x => { throw x })
  .then(x => console.log(`then ${x}`))
  .catch(err => console.log(`error ${err}`))
  .then(() => Promise.resolve(2))
  .catch(err => console.log(`error ${err}`))
  .then(x => console.log(`then ${x}`));

解釋

我們來看看這段代碼將如何逐步執行。

1. 第一個 then 處理程序拋出一個錯誤（意味著 — 返回一個被拒絕的promise）。
2. 下一個 then 處理程序由于錯誤被拋出而沒有觸發，取而代之的是執行轉移到下一個 catch。
3. catch 處理程序打印一個錯誤并返回一個空的 promise。像 then 處理程序一樣，catch 處理程序總是返回一個 promise。
4. 因為 catch 處理程序返回了一個 promise，所以下一個 then 處理程序被調用，并返回一個值為 2 的 promise。

最后一個 then 處理程序被調用，并打印2。