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

概述

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
在作用域頂部宣告變數，避免依賴提升機制
使用區塊作用域增強程式碼可讀性與可維護性

參考資源

More from 雞蛋糕的前端修煉屋

線上課程觀課進度管理小工具開發日誌

Day 6：JavaScript 程式碼執行排序：遞迴函數、Call Stack、Task Queue

Call Stack；遞迴函數與 call stack 的關係；Task Queue（非同步的概念再釐清）

雞蛋糕的前端修煉屋

Dec 2

Day 9：「修煉圈圈 Practice Rings」Web app 開發日誌 - 2025 六角 AI Vibe Coding 體驗營期末大魔王作業

這份筆記旨在記錄 2025 六角 Vibe Coding 體驗營每日作業 Day 21 的期末專案成果，從一個簡單的個人痛點出發，透過與 AI（在我這個情境中是 Perplexity）協作，在一天內完成了一個包含前後端的全端網頁小工具：「修煉圈圈 Practice Rings」。

概述

執行環境類型

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 的提升行為

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
在作用域頂部宣告變數，避免依賴提升機制
使用區塊作用域增強程式碼可讀性與可維護性

參考資源

More from 雞蛋糕的前端修煉屋

線上課程觀課進度管理小工具開發日誌

Day 6：JavaScript 程式碼執行排序：遞迴函數、Call Stack、Task Queue

Call Stack；遞迴函數與 call stack 的關係；Task Queue（非同步的概念再釐清）

雞蛋糕的前端修煉屋

Dec 2

Day 9：「修煉圈圈 Practice Rings」Web app 開發日誌 - 2025 六角 AI Vibe Coding 體驗營期末大魔王作業

More from 雞蛋糕的前端修煉屋

概述

執行環境類型

全域執行環境（Global Execution Context）

函式執行環境（Function Execution Context）

Eval 執行環境

執行環境堆疊

作用域機制

語彙環境（Lexical Environment）

作用域定義

作用域鏈（Scope Chain）

提升機制（Hoisting）

執行環境的兩個階段

創建階段（Creation Phase）

執行階段（Execution Phase）

var 的提升行為

let 與 const 的提升行為

函式提升

最佳實踐

參考資源

No comments yet

More from 雞蛋糕的前端修煉屋

雞蛋糕的前端修煉屋

More from 雞蛋糕的前端修煉屋

概述

執行環境類型

全域執行環境（Global Execution Context）

函式執行環境（Function Execution Context）

Eval 執行環境

執行環境堆疊

作用域機制

語彙環境（Lexical Environment）

作用域定義

作用域鏈（Scope Chain）

提升機制（Hoisting）

執行環境的兩個階段

創建階段（Creation Phase）

執行階段（Execution Phase）

var 的提升行為

let 與 const 的提升行為

函式提升

最佳實踐

參考資源

No comments yet

More from 雞蛋糕的前端修煉屋

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

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

概述

執行環境類型

全域執行環境（Global Execution Context）

函式執行環境（Function Execution Context）

Eval 執行環境

執行環境堆疊

作用域機制

語彙環境（Lexical Environment）

作用域定義

作用域鏈（Scope Chain）

提升機制（Hoisting）

執行環境的兩個階段

創建階段（Creation Phase）

執行階段（Execution Phase）

var 的提升行為

let 與 const 的提升行為

函式提升

最佳實踐

參考資源

概述

執行環境類型

全域執行環境（Global Execution Context）

函式執行環境（Function Execution Context）

Eval 執行環境

執行環境堆疊

作用域機制

語彙環境（Lexical Environment）

作用域定義

作用域鏈（Scope Chain）

提升機制（Hoisting）

執行環境的兩個階段

創建階段（Creation Phase）

執行階段（Execution Phase）