掌握高階 JavaScript：關鍵主題與麵試問題

JavaScript 是現代 Web 開發的必備語言，但掌握其高級概念可以讓您成為一名出色的開發人員。在本部落格中，我們將探討關鍵的高級 JavaScript 主題，並提供面試問題及其答案和範例，以幫助您在下一次面試中脫穎而出。

1。關閉

什麼是閉包？
閉包是即使在外部函數傳回後仍保留對其外部作用域的存取的函數。

例子：

function outerFunction(outerVariable) {
    return function innerFunction(innerVariable) {
        console.log(`Outer Variable: ${outerVariable}, Inner Variable: ${innerVariable}`);
    };
}

const closureFunction = outerFunction("Hello");
closureFunction("World");

輸出：

Outer Variable: Hello, Inner Variable: World

面試問題：
問：閉包在實際場景中如何使用？
A: 閉包對於資料隱藏非常有用，例如在 JavaScript 中實作私有變數或在非同步回調中維護狀態。

2。 Promise 和非同步/等待

什麼是承諾？

Promise 代表一個可能現在、未來或永遠無法使用的值。它們允許更好地處理非同步操作。

非同步/等待範例：

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("Data fetched"), 2000);
    });
}

async function getData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

getData();

輸出：

Data fetched

面試問題：
問：Promise.then() 和 async/await 有什麼不同？
A: Promise.then() 是用來處理 Promise 的方法，而 async/await 提供了語法糖，使非同步程式碼看起來是同步的，提高了可讀性。

---

3。事件循環和並發模型

事件循環如何運作？
事件循環處理 JavaScript 程式碼的執行，包括回呼和非同步任務。

範例：

console.log("Start");

setTimeout(() => {
    console.log("Timeout");
}, 0);

console.log("End");

輸出：

Start
End
Timeout

面試問題：
問：解釋一下呼叫堆疊和事件循環之間的差異。
A: 呼叫堆疊追蹤函數執行，而事件循環則確保一旦堆疊為空，就會執行非同步任務，例如回調。

---

4。原型與繼承

JavaScript 中的原型是什麼？

原型允許物件從其他物件繼承屬性和方法。

範例：

function Person(name) {
    this.name = name;
}

Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person("Alice");
person1.greet();

輸出：

Hello, my name is Alice

面試問題：
問：原型繼承與經典繼承有何不同？
A: 原型繼承是基於直接從其他物件繼承的對象，而經典繼承則依賴類別層次結構。

---

5。柯里化

什麼是柯里化？

柯里化將具有多個參數的函數轉換為一系列函數，每個函數採用單一參數。

例子：

function outerFunction(outerVariable) {
    return function innerFunction(innerVariable) {
        console.log(`Outer Variable: ${outerVariable}, Inner Variable: ${innerVariable}`);
    };
}

const closureFunction = outerFunction("Hello");
closureFunction("World");

輸出：

Outer Variable: Hello, Inner Variable: World

面試問題：
問：為什麼在 JavaScript 中使用柯里化？
A: 柯里化可以實現部分應用，從而提高程式碼的可重複使用性和可讀性。

6。模組系統

CommonJS 與 ES 模組

• CommonJS：用於 Node.js，使用 require() 同步載入模組。
• ES 模組：原生於 JavaScript，使用匯入和匯出非同步載入模組。

範例：

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("Data fetched"), 2000);
    });
}

async function getData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

getData();

面試問題：
問：使用 ES 模組相對於 CommonJS 有什麼好處？
答： ES 模組支援 tree-shaking 以優化套件大小，並且在現代瀏覽器中得到原生支援。

以上是掌握高階 JavaScript：關鍵主題與麵試問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！