JavaScript 是網路的支柱，為數十億網站和應用程式提供動態用戶端功能。但您有沒有想過 JavaScript 是如何在後台發揮魔力的？在這篇文章中，我們將深入研究 JavaScript 單線程本質的內部工作原理並探索非同步程式設計的概念。

單線程是什麼意思？

當我們說 JavaScript 是「單線程」時，這意味著它有一個呼叫堆疊。呼叫堆疊本質上是 JavaScript 追蹤正在執行的函數的結構。它遵循後進先出 (LIFO) 順序，這意味著最後推送到堆疊的函數將最先完成。以下是其工作原理的範例：

function first() {
    console.log('First function');
}

function second() {
    console.log('Second function');
}

first();
second();

在本例中，first()函數被加入到堆疊並執行。一旦完成，它就會被彈出，第二個()函數被壓入堆疊並接下來執行。

雖然單線程語言可能看起來有限，因為它們一次只能做一件事，但 JavaScript 巧妙地使用非同步機制使其能夠模擬多任務處理。

事件循環和非同步執行

JavaScript 使用非同步執行來處理可能需要很長時間才能完成的操作，例如網路請求、檔案 I/O 或計時器。儘管是單線程的，但由於事件循環和回調隊列，它可以同時管理多個任務。

事件循環

事件循環是JavaScript並發模型中的核心概念。它的主要職責是管理 JavaScript 如何處理非同步程式碼執行。其運作原理如下：

1. 同步程式碼首先運行。當 JavaScript 啟動時，它使用呼叫堆疊以同步方式逐行執行全域範圍內的所有程式碼。

2. 非同步任務被傳送到 Web API（如 setTimeout、fetch 等）或 Node.js API，它們將在後台進行處理。

3. 回呼佇列是非同步操作完成後放置的地方。

4. 事件循環不斷檢查呼叫堆疊是否為空。如果堆疊為空，它將從回調佇列中取出第一項並將其推送到呼叫堆疊上，以允許其執行。

非同步 JavaScript 的魔力在於事件循環、呼叫堆疊和回呼佇列之間的交互作用。非同步操作不會阻塞呼叫堆疊，這意味著 JavaScript 可以在等待後台任務完成的同時繼續執行其他程式碼。

範例：使用 setTimeout

考慮以下帶有 setTimeout 函數的範例：

console.log('Start');

setTimeout(() => {
    console.log('This runs after 2 seconds');
}, 2000);

console.log('End');

這是一步一步發生的事情：

1. JavaScript 列印「Start」。

2. setTimeout 函數被調用，但不是阻塞執行 2 秒，而是發送到 Web API，在後台運行。

3. JavaScript 列印“End”，繼續執行而不等待 setTimeout 完成。

4. 2秒後，setTimeout內部的回呼函數放入回呼佇列中。

5. 事件循環檢查呼叫堆疊是否為空（確實如此），然後將回調函數推入堆疊並執行它，列印「This running after 2秒」。

Promise 和非同步/等待

現代JavaScript 中處理非同步任務的另一種流行方法是透過Promises 和async/await 語法，這有助於透過避免深層嵌套的回呼（也稱為「回調地獄」）來提高程式碼的可讀性。

Promise 表示非同步操作的最終完成（或失敗）及其結果值。這是一個例子：

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Promise resolved!');
    }, 1000);
});

promise.then(result => {
    console.log(result);  // Output after 1 second: 'Promise resolved!'
});

我們可以使用 then() 來處理 Promise 解決時發生的情況，而不是依賴回調。如果我們想以更同步的方式處理非同步程式碼，我們可以使用 async/await:

async function asyncExample() {
    const result = await promise;
    console.log(result);  // Output after 1 second: 'Promise resolved!'
}

asyncExample();

這使得程式碼更清晰、更容易理解，讓我們在移動到下一行程式碼之前「等待」非同步任務完成，即使 JavaScript 在幕後仍然是非阻塞的。

JavaScript 非同步模型中的關鍵元件

1. 呼叫堆疊：執行同步程式碼的地方。

2. Web API/Node.js API：處理非同步任務（如網路請求）的外部環境。

3. 回呼佇列：非同步任務結果等待推送到呼叫堆疊執行的佇列。

4. 事件循環：在呼叫堆疊和回調佇列之間進行協調的系統，確保任務以正確的順序處理。

結論

JavaScript 的單執行緒特性乍看之下似乎有局限性，但其非同步功能使其能夠有效地管理多個任務。透過事件循環、回呼佇列和 Promises 等機制，JavaScript 能夠處理複雜的非阻塞操作，同時保持直覺、同步的程式設計風格。