# Day 32：JavaScript 執行環境與作用域機制

**Published by:** [雞蛋糕的前端修煉屋](https://paragraph.com/@gcake/)
**Published on:** 2026-01-06
**URL:** https://paragraph.com/@gcake/day-32

## Content

概述JavaScript 引擎透過解析器（Parser）將原始碼轉換為抽象語法樹（AST），再經由直譯器或即時編譯器（JIT Compiler）轉換為可執行程式碼 。現代引擎如 V8 採用混合策略，結合直譯與編譯的優勢提升執行效能。執行環境類型JavaScript 定義三種執行環境（Execution Context）：全域執行環境（Global Execution Context）預設的執行環境，程式啟動時自動建立 ：建立全域物件（瀏覽器環境為 window）建立 this 變數並指向全域物件進行記憶體配置函式執行環境（Function Execution Context）僅在函式被呼叫時產生 ：建立 arguments 物件，存放傳入的引數資訊每個函式執行環境彼此獨立可同時存在多個函式執行環境Eval 執行環境由 eval() 函式產生，用於執行字串形式的程式碼，但因安全性與效能考量已較少使用 。[7]執行環境堆疊JavaScript 採用「後進先出」（LIFO）的堆疊結構管理執行環境 ：function firstFunc() { console.log('First'); } function secondFunc() { firstFunc(); console.log('Second'); } secondFunc(); 執行順序：全域執行環境入堆疊secondFunc() 執行環境入堆疊firstFunc() 執行環境入堆疊firstFunc() 執行完畢出堆疊secondFunc() 執行完畢出堆疊全域執行環境最後出堆疊作用域機制語彙環境（Lexical Environment）程式碼的撰寫位置決定變數的存取範圍，這是 JavaScript 的靜態作用域特性 。作用域定義變數可被存取的有效範圍 ：全域作用域：在程式任何位置都可存取函式作用域：僅限函式內部存取（var 宣告）區塊作用域：僅限 {} 區塊內存取（let/const 宣告）// 全域作用域 const globalVar = 'global'; function example() { // 函式作用域 var functionVar = 'function'; if (true) { // 區塊作用域 let blockVar = 'block'; const blockConst = 'const'; console.log(blockVar); // 'block' } console.log(blockVar); // ReferenceError } 作用域鏈（Scope Chain）當變數在當前作用域找不到時，會沿著作用域鏈向外層查找，直到全域作用域為止 。提升機制（Hoisting）執行環境的兩個階段執行環境以兩個階段運作 ：創建階段（Creation Phase）對變數和函式進行記憶體配置 ：var 宣告的變數初始化為 undefined函式宣告完整存入記憶體let/const 配置記憶體空間但不初始化執行階段（Execution Phase）逐行執行程式碼並賦值 。var 的提升行為console.log(x); // undefined（不會報錯） var x = 5; console.log(x); // 5 等同於：var x; // 創建階段：記憶體配置並初始化為 undefined console.log(x); x = 5; // 執行階段：賦值 console.log(x); let 與 const 的提升行為let 和 const 的宣告會被提升並配置記憶體，但不會初始化為 undefined 。從區塊開始到宣告語句執行前，這段區間稱為「暫時性死區」（Temporal Dead Zone, TDZ），嘗試存取會拋出 ReferenceError ：console.log(y); // ReferenceError: Cannot access 'y' before initialization let y = 10; { // TDZ 開始 console.log(z); // ReferenceError // TDZ 持續 let z = 20; // TDZ 結束 console.log(z); // 20 } 函式提升函式宣告會完整提升，可在宣告前呼叫 ：greet(); // 'Hello' function greet() { console.log('Hello'); } 最佳實踐根據 Airbnb JavaScript Style Guide ：優先使用 const，需要重新賦值時使用 let避免使用 var在作用域頂部宣告變數，避免依賴提升機制使用區塊作用域增強程式碼可讀性與可維護性參考資源MDN - let 宣告MDN - var 宣告MDN - 區塊陳述MDN - 執行環境深入探討Airbnb JavaScript Style Guide

## Publication Information

- [雞蛋糕的前端修煉屋](https://paragraph.com/@gcake/): Publication homepage
- [All Posts](https://paragraph.com/@gcake/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@gcake): Subscribe to updates