JavaScript 作為驅動現代互聯網的核心語言之一，憑借其動態性和靈活性在前端開發中占據了不可替代的地位。然而，許多開發者在日常使用中往往只停留在表面，對其背后的運作機制了解不深。本文將帶你深入探索 JavaScript 的工作原理，揭開其動態特性的神秘面紗，幫助你從底層理解這門語言的精髓。

1. JavaScript 的單線程本質

1.1 單線程與同步執行

JavaScript 從設計之初就是一種單線程、同步執行的語言。這意味著它一次只能處理一個任務，代碼會逐行在單個線程中執行。這種設計簡化了代碼的執行流程，但也帶來了一些挑戰，尤其是在處理耗時操作時。

單線程執行

盡管 JavaScript 是單線程的，但通過Web API（在 browser 環境中）或Node.js（在 server 環境中）實現了異步操作的能力。這使得 JavaScript 能夠處理并發任務，仿佛它是多線程的。

多線程執行

1.2 單線程的挑戰與解決方案

單線程設計的最大挑戰是阻塞問題。如果某個任務耗時過長，后續任務將無法執行，導致頁面卡頓或程序無響應。為了解決這個問題，JavaScript 引入了事件循環和任務隊列機制，使得異步操作能夠在后臺執行，而不會阻塞主線程。

2. JavaScript 運行時的核心組件

JavaScript 的運行時環境由三個關鍵組件組成，它們協同工作，確保代碼的高效執行：

圖片

2.1 調用棧（Call Stack）

調用棧是一種用于跟蹤正在執行的函數的數據結構。它遵循后進先出（LIFO）的原則，即最后添加的函數最先被移除。調用棧的底部是全局執行上下文，這是全局代碼的執行環境。每當一個函數被調用時，它的執行上下文會被壓入調用棧的頂部，函數執行完畢后，其執行上下文會被彈出棧。

2.2 內存堆（Memory Heap）

內存堆是用于存儲對象、數組和其他復雜數據結構的內存區域。JavaScript 使用自動垃圾回收機制來管理內存，釋放不再被引用的對象所占用的內存空間。內存堆的設計使得 JavaScript 能夠高效地處理動態數據，但也可能導致內存泄漏問題，特別是在處理大型對象或循環引用時。

2.3 執行上下文（Execution Context）

Execution Context 是 JavaScript 代碼執行的環境。它包含了當前執行的代碼以及與之相關的所有信息。JavaScript 中主要有兩種執行上下文：

• 全局上下文：這是主腳本的執行環境，全局對象（在瀏覽器中為 window，在 Node.js 環境中為 global）和 this 關鍵字都綁定在這個上下文中。
• 函數上下文：每當一個函數被調用時，都會創建一個新的函數執行上下文。每個函數上下文都有自己的變量環境和作用域鏈。

2.4 執行上下文的兩個階段

執行上下文的創建和執行分為兩個階段：

2.4.1 內存創建階段（Creation Phase）

在這個階段，JavaScript 引擎會為變量和函數分配內存，并進行初始化：

• var 聲明：變量會被提升到作用域的頂部，并初始化為 undefined。
• let 和 const 聲明：變量也會被提升，但會進入暫時性死區（Temporal Dead Zone），直到聲明語句被執行時才會被初始化。

2.4.2 執行階段（Execution Phase）

在這個階段，JavaScript 引擎會逐行執行代碼，為變量分配實際值，并在函數調用時創建新的函數上下文。

3. 異步 JavaScript：事件循環與任務隊列

JavaScript 的異步能力是通過**事件循環（Event Loop）和任務隊列（Task Queue）**來實現的。這些機制使得 JavaScript 能夠在單線程環境中處理并發任務。

3.1 宏任務隊列（Macro Task Queue）

宏任務隊列是一個**先進先出（FIFO）**的隊列，用于保存準備執行的異步操作的回調函數。常見的宏任務包括 setTimeout、setInterval 和 I/O 操作等。

3.2 微任務隊列（Micro Task Queue）

微任務隊列是一個優先級更高的隊列，用于處理 Promise 的回調和其他需要在下一個宏任務之前執行的微任務。常見的微任務包括 Promise.then、MutationObserver 等。

3.3 事件循環（Event Loop）

事件循環是 JavaScript 異步編程的核心機制。它的工作流程如下：

1. 檢查調用棧：事件循環會不斷檢查調用棧是否為空。
2. 處理微任務：如果調用棧為空，事件循環會優先處理微任務隊列中的所有任務。
3. 處理宏任務：微任務處理完畢后，事件循環會從宏任務隊列中取出第一個任務，并將其推入調用棧執行。

圖片

4. JavaScript 的垃圾回收機制

JavaScript 的垃圾回收機制是確保內存高效利用的關鍵。它通過**標記-清除算法（Mark-and-Sweep）**來自動回收不再使用的內存。垃圾回收器會定期檢查內存堆中的對象，標記那些仍然被引用的對象，然后清除那些未被標記的對象。

4.1 內存泄漏的常見原因

圖片

盡管 JavaScript 有自動垃圾回收機制，但某些情況下仍然可能導致內存泄漏，例如：

• 意外的全局變量：未使用 var、let 或 const 聲明的變量會成為全局變量，導致內存無法被回收。
• 未清除的定時器：未清除的 setTimeout 或 setInterval 會持續占用內存。
• 閉包引用：閉包中引用的外部變量會一直保留在內存中，直到閉包本身被銷毀。

4.2 如何避免內存泄漏

為了避免內存泄漏，開發者應注意以下幾個關鍵點：

• 使用 let 和 const 代替 var，防止意外創建全局變量。
• 在任務完成后及時清除定時器和事件監聽器。
• 合理使用閉包，避免不必要的引用。

5. 總結

理解 JavaScript 的底層工作原理不僅有助于編寫更高效的代碼，還能幫助你在調試復雜問題時更加得心應手。從它的單線程本質到事件循環、執行上下文和垃圾回收機制，這些核心概念構成了 JavaScript 行為的基石。

通過掌握這些底層機制，你將能夠更好地理解 JavaScript 代碼的執行過程，并編寫出更高效、更健壯的應用程序。無論是前端開發還是后端開發，深入理解 JavaScript 的底層原理都將為你帶來巨大的優勢。

原文地址：https://dev.to/alaa-samy/javascript-under-the-hood-understanding-the-core-mechanics-4aj9
作者：Alaa Samy