最失敗的 JavaScript 面試問題

發表於2023-09-20
JavaScript面試
首發於公眾號 大遷世界，歡迎關注。? 每週7篇實用的前端文章 ?️ 分享值得關注的開發工具 ?分享個人創業過程中的趣事

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

事件迴圈 Event loop

很難想象有哪個JavaScript面試不會提到事件迴圈這個主題。這並非沒有道理，這個主題確實是非常基礎的，並且每天都被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。

交流

首發於公眾號 大遷世界，歡迎關注。? 每週一篇實用的前端文章 ?️ 分享值得關注的開發工具 ❓ 有疑問？我來回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章