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

事件循環(huán) Event loop

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

小測驗(yàn)1：只有18%的正確答案

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

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

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

console.log(2);

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

console.log(5);

解釋：

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

一個正確回答了這個測驗(yàn)的開發(fā)者的內(nèi)部對話可能是這樣的：

給定 0 延遲，我們傳遞給 setTimeout 的函數(shù)會同步調(diào)用還是異步調(diào)用？

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

我們作為參數(shù)傳遞給 Promise 構(gòu)造函數(shù)的函數(shù)會同步調(diào)用還是異步調(diào)用？

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

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

哪個優(yōu)先級更高 —— 微任務(wù)隊列還是宏任務(wù)隊列，換句話說 —— Promise 還是 setTimeout？

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

通過分析回應(yīng)，我們可以得出結(jié)論，大多數(shù)受訪者在假設(shè)傳遞給 Promise 構(gòu)造函數(shù)作為參數(shù)的執(zhí)行器函數(shù)是異步調(diào)用的方面是錯誤的（44%的人選擇了這個選項）。

上下文（Context）

關(guān)于上下文的問題甚至可能會難倒經(jīng)驗(yàn)豐富的開發(fā)者。例如，只有29%的開發(fā)者解決了這個復(fù)雜但本質(zhì)上很簡單的任務(wù)。

小測驗(yàn)1：只有29%的正確答案

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

'use strict';

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

function callFoo(fn) {
  fn();
}

let obj = { foo };

callFoo(obj.foo);

解釋：

this 的值是在函數(shù)被調(diào)用時設(shè)定的。

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

在普通模式下，當(dāng)沒有執(zhí)行上下文并且代碼在瀏覽器環(huán)境中運(yùn)行時，this 指向 window 對象，在嚴(yán)格模式下，它是 undefined。

正確答案是 undefined。

小測驗(yàn)2：只有28%的正確答案

另一個常見的面試問題是箭頭函數(shù)內(nèi)部 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());

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

解釋：

箭頭函數(shù)沒有自己的 this。相反，箭頭函數(shù)體內(nèi)的 this 指向該箭頭函數(shù)定義所在作用域的this 值。

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

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

小測驗(yàn)2：只有39%的正確答案

另一個關(guān)于箭頭函數(shù)的問題可能是這樣的。

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

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

const num = new Num();

console.log(num.getNum());

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

解釋：

箭頭函數(shù)不能用作構(gòu)造函數(shù)，當(dāng)使用 new 調(diào)用時會拋出錯誤。它們也沒有原型屬性：

TypeError：無法設(shè)置undefined的屬性（設(shè)置'getNum'）

這樣的問題比較少見，但你應(yīng)該為它們做好準(zhǔn)備。你可以在 MDN 上查看更多關(guān)于箭頭函數(shù)的信息。

變量作用域

這個主題值得探討，不僅因?yàn)樗诿嬖囍泻苁軞g迎，而且還有實(shí)際應(yīng)用的原因。如果你能很好地理解變量作用域，那么你將節(jié)省大量的調(diào)試代碼的時間。

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

小測驗(yàn)1：只有38%的正確答案

'use strict';

console.log(foo());

let bar = 'bar';

function foo() {
  return bar;
}

bar = 'baz';

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

解釋：

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

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

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

這種行為是因?yàn)?nbsp;const 變量而被選中的。訪問未定義的 var 變量時，我們得到的是undefined。對于 const 變量來說，這是不可接受的，因?yàn)樗鼘⒉辉偈且粋€常量。

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

回到我們的例子。

由于函數(shù)調(diào)用在 bar 變量的定義之上，該變量處于臨時死區(qū)。

代碼拋出一個錯誤：

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

小測驗(yàn)2：只有33%的正確答案

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

console.log(typeof foo);

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

解釋：

在命名函數(shù)表達(dá)式中，名稱只在函數(shù)體內(nèi)部是局部的，外部無法訪問。因此，全局作用域中不存在foo。

typeof運(yùn)算符對未定義的變量返回undefined。

小測驗(yàn)3：只有36%的正確答案

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

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

foo(5);

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

解釋：

對于具有復(fù)雜參數(shù)（解構(gòu)、默認(rèn)值）的函數(shù)，參數(shù)列表被封閉在其自己的作用域內(nèi)。

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

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

ES6模塊。

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

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

小測驗(yàn)1：只有41%的正確答案

console.log('index.js');

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

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

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

解釋

導(dǎo)入會被提升。

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

所有依賴項將在代碼運(yùn)行之前加載。

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

提升

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

小測驗(yàn)1：只有40%的正確答案

盡管選定的小測驗(yàn)與現(xiàn)實(shí)脫節(jié)，但它完美地解釋了提升的機(jī)制。如果你明白這段代碼是如何工作的，你幾乎不應(yīng)該在其他所有有關(guān)提升的問題上遇到任何問題。

'use strict';

var num = 8;

function num() {
  return 10;
}

console.log(num);

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

解釋

函數(shù)和變量聲明被放在其作用域的頂部，變量的初始化發(fā)生在腳本執(zhí)行時。

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

函數(shù)總是首先被提升。無論函數(shù)和具有相同名稱的變量的聲明在代碼中以何種順序出現(xiàn)，函數(shù)都優(yōu)先，因?yàn)樗仙酶摺?/p>

示例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() {}

將被轉(zhuǎn)換為：

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

結(jié)果，num = 8。

小測驗(yàn)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 }

現(xiàn)在是時候記住函數(shù)是被提升的，變量初始化總是在函數(shù)/變量聲明之后發(fā)生。

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

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

所以正確答案是數(shù)字。

Promises

程序員對promises的主題了解得比他們自己認(rèn)為的要好。這個主題上的面試問題通常是最基礎(chǔ)的，大多數(shù)人都能應(yīng)對。但我們?nèi)匀徊荒芾@過它，因?yàn)槊嬖嚬僖彩侨绱恕?/p>

小測驗(yàn)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}`));

解釋

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

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

最后一個 then 處理程序被調(diào)用，并打印2。