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

事件循環(huán) Event loop

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

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

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

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

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

console.log(2);

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

console.log(5);

解釋?zhuān)?/h4>

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

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

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

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

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

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

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

哪個(gè)優(yōu)先級(jí)更高 —— 微任務(wù)隊(duì)列還是宏任務(wù)隊(duì)列，換句話(huà)說(shuō) —— Promise 還是 setTimeout？

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

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

上下文（Context）

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

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

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

'use strict';

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

function callFoo(fn) {
  fn();
}

let obj = { foo };

callFoo(obj.foo);

解釋?zhuān)?/h4>

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

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

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

正確答案是 undefined。

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

另一個(gè)常見(jiàn)的面試問(wèn)題是箭頭函數(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());

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

解釋?zhuān)?/h4>

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

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

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

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

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

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

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

const num = new Num();

console.log(num.getNum());

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

解釋?zhuān)?/h4>

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

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

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

變量作用域

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

讓我們看一些常見(jiàn)的例子。

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

'use strict';

console.log(foo());

let bar = 'bar';

function foo() {
  return bar;
}

bar = 'baz';

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

解釋?zhuān)?/h4>

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

如果我們?cè)?nbsp;let / const 變量定義之前嘗試訪問(wèn)它們，將會(huì)拋出引用錯(cuò)誤。

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

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

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

回到我們的例子。

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

代碼拋出一個(gè)錯(cuò)誤：

ReferenceError：初始化前不能訪問(wèn)'bar'

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

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

console.log(typeof foo);

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

解釋?zhuān)?/h4>

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

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

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

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

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

foo(5);

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

解釋?zhuān)?/p>

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

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

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

ES6模塊。

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

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

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

console.log('index.js');

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

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

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

解釋

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

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

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

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

提升

另一個(gè)熱門(mén)的面試題目是提升。

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

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

'use strict';

var num = 8;

function num() {
  return 10;
}

console.log(num);

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

解釋

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

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

函數(shù)總是首先被提升。無(wú)論函數(shù)和具有相同名稱(chēng)的變量的聲明在代碼中以何種順序出現(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。

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

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

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ù)是被提升的，變量初始化總是在函數(shù)/變量聲明之后發(fā)生。

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

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

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

Promises

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

小測(cè)驗(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}`));

解釋

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

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

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