一、基礎入門：理解 JavaScript 在哪裏執行

By /

1. JavaScript、ECMAScript 與執行環境

學習 JavaScript 的第一步，是分清楚三件事：

  1. JavaScript：你用來編寫程式的語言。
  2. ECMAScript：定義這個語言如何運作的標準。
  3. 執行環境：真正執行程式，並提供額外功能的平台。

例如以下程式：

const message = "你好，JavaScript！";
console.log(message);

當中的 const、字串及函式呼叫語法，屬於 ECMAScript 定義的語言功能；console 則由執行環境提供。

1.1 JavaScript 是甚麼？

JavaScript 是一種通用程式語言，最初用於網頁互動，現在亦廣泛用於伺服器、命令列工具、桌面及流動應用。

常見應用

場景例子
網頁互動按鈕操作、表單驗證、選單
資料請求從 API 取得產品、天氣或帳戶資料
伺服器開發建立 HTTP API、處理業務邏輯
自動化工具整理檔案、產生報表
即時應用聊天室、通知、協作工具

JavaScript 的基本特性

  • 動態型別：變數不需要預先指定固定型別。
  • 支援多種程式設計方式：程序式、物件導向及函式式。
  • 以原型為基礎：物件可以透過原型鏈共享行為。
  • 函式是一級值：可以存入變數、作為參數及回傳值。
  • 有自動記憶體管理：由垃圾回收機制回收不再需要的記憶體。
let value = 100;
value = "一百"; // 同一個變數可以改為儲存字串

const double = number => number * 2;

console.log(double(5)); // 10

JavaScript 與 Java 是不同語言。 名稱相似，不代表語法、型別系統或執行方式相同。

1.2 ECMAScript 是甚麼？

ECMAScript 是 JavaScript 核心語言的標準。

你可以將它理解為一份規則書，規定：

  • 哪些語法有效。
  • 有哪些資料型別。
  • 變數及作用域如何運作。
  • 運算子如何比較及轉換值。
  • 函式及物件如何運作。
  • 哪些內建物件及方法應該存在。

ECMAScript 規範的內容

類別例子
語法const、let、if、class
型別string、number、bigint、symbol
核心物件Object、Array、Map、Set
資料處理JSON、RegExp
非同步語言功能Promise、async／await
模組語法import、export

例如：

const prices = [100, 200, 300];
const total = prices.reduce((sum, price) => sum + price, 0);

這裏的陣列、箭頭函式及 reduce() 都屬於 ECMAScript 核心功能。

ECMAScript 不包括甚麼？

以下功能不屬於 ECMA-262 核心語言標準：

  • 操作網頁：document、DOM。
  • 瀏覽器視窗：window。
  • 計時器：setTimeout()。
  • 網絡請求：fetch()。
  • 輸出訊息：console.log()。
  • 讀取電腦檔案：Node.js 的 node:fs。

不屬於核心語言，不代表只有瀏覽器能使用。 例如 fetch() 及計時器也可以由其他執行環境提供。

另外，Intl 國際化 API 由另一份 ECMAScript 標準 ECMA-402 定義。

常見版本名稱

名稱說明
ES5ECMAScript 第 5 版
ES6／ES2015同一版本的兩種常見名稱
ES2016、ES2017……以年份命名的年度版本
ES2026ECMAScript 2026 年版本

標準版本不是你必須安裝的一個軟件版本。 真正決定程式能否執行的，是目標引擎及環境支援哪些功能。

1.3 JavaScript 引擎是甚麼？

JavaScript 引擎是負責理解及執行 JavaScript 程式碼的軟件。

常見引擎包括：

引擎常見使用平台
V8Chrome、Node.js
SpiderMonkeyFirefox
JavaScriptCoreSafari

可以先將執行過程理解為：

程式碼 → 解析 → 執行 → 產生結果

現代引擎通常會結合直譯及即時編譯（JIT）等技術，因此不宜將 JavaScript 簡化成「永遠逐行直譯的語言」。

引擎與環境有甚麼分別？

  • 引擎：負責執行語言本身。
  • 環境：使用引擎，並提供檔案、網絡、畫面等外部能力。

Chrome 與 Node.js 都使用 V8，但只有 Chrome 的一般網頁環境才有頁面的 document。

同一款引擎，不代表擁有相同 API。

1.4 執行環境是甚麼？

執行環境是讓 JavaScript 程式運作的整體平台。

它通常包括：

  • JavaScript 引擎。
  • 平台提供的 API。
  • 工作排程及事件循環機制。
  • 與作業系統、網絡或使用者介面互動的能力。

最常見的兩種環境是瀏覽器及 Node.js。

A. 瀏覽器環境

瀏覽器讓 JavaScript 與網頁互動：

const title = document.querySelector("h1");

if (title) {
  title.textContent = "歡迎學習 JavaScript";
}

常見瀏覽器 API：

API功能
document存取及修改頁面 DOM
window一般網頁視窗的全域物件
location取得或操作網址
localStorage儲存少量字串資料
fetch()發送網絡請求
addEventListener()監聽事件

注意：瀏覽器中的 Web Worker 是另一種執行情境，沒有頁面的 window 或 document，不能直接操作 DOM。

B. Node.js 環境

Node.js 讓 JavaScript 在瀏覽器以外執行，例如讀取檔案或建立伺服器。

以下例子可儲存為 read-file.mjs，並以 node read-file.mjs 執行：

import { readFile } from "node:fs/promises";

try {
  const text = await readFile("./notes.txt", "utf8");
  console.log(text);
} catch (error) {
  console.error("讀取檔案失敗：", error);
}

這個例子需要目前工作目錄中有 notes.txt。

常見 Node.js API：

API／模組功能
process程序資訊、環境變數等
node:fs檔案系統操作
node:path處理檔案路徑
node:httpHTTP 伺服器及相關功能
Buffer二進位資料處理

Node.js 預設不提供網頁 DOM，因此一般不能直接使用 document.querySelector()。

1.5 同一段程式，為何有時可以執行，有時不可以？

原因通常有三種：

原因一：使用了環境專屬 API

console.log(document.title);
  • 在有頁面的瀏覽器環境：可以執行。
  • 在預設 Node.js 環境：通常會出現 ReferenceError。

因為 Node.js 沒有頁面的 document。

原因二：引擎尚未支援語法或方法

較舊的引擎可能不認識某些新語法，或沒有某個新增內建方法。

要分清楚：

  • 語法不支援：可能在解析階段就失敗。
  • 方法不存在：呼叫時可能出現 TypeError。

原因三：權限或執行條件不符合

例如地理位置或通知 API，即使瀏覽器提供該功能，也可能需要：

  • 安全環境，例如 HTTPS。
  • 使用者授權。
  • 使用者操作。
  • 符合瀏覽器政策。

有 API，不代表任何時候都能成功使用。

1.6 全域物件與 globalThis

全域物件提供目前環境中的部分全域功能。

執行情境常見名稱
一般瀏覽器網頁window
Web Workerself
Node.jsglobal
跨環境存取globalThis

跨環境程式碼一般優先考慮 globalThis：

console.log(typeof globalThis.console); // 通常是 "object"

const hasFetch = typeof globalThis.fetch === "function";
console.log("是否提供 fetch：", hasFetch);

但 globalThis 只提供一致的存取方式，不會令所有環境擁有相同功能。

亦要注意：頂層的 let、const 不會因此自動成為全域物件的屬性；模組中的宣告則屬於模組作用域。

1.7 語言、平台 API 與第三方套件的分別

寫 JavaScript 時，你經常會同時接觸三層功能：

層次來源例子
核心語言ECMAScript 標準Array、Map、Promise
平台 API瀏覽器或其他執行環境DOM、fetch()、node:fs
第三方套件另外安裝的函式庫或框架React、Vue、Express

例如：

const names = ["小明", "小美"];
const result = names.map(name => `你好，${name}`);

console.log(result);
  • 陣列、map()、模板字串：核心語言。
  • console：平台 API。
  • 沒有使用第三方套件。

先分清功能來自哪一層，會更容易找文件、理解錯誤及判斷相容性。

1.8 動手練習

練習一：在瀏覽器 Console 執行

開啟瀏覽器開發者工具，選擇 Console，輸入：

console.log("你好，JavaScript！");
console.log(10 + 20);
console.log(typeof document);
console.log(typeof process);

在一般網頁環境中，通常會看到：

你好，JavaScript！
30
object
undefined

練習二：在 Node.js 執行

安裝 Node.js 後，建立 hello.js：

console.log("你好，Node.js！");
console.log(10 + 20);
console.log(typeof document);
console.log(typeof process);

在終端機執行：

node hello.js

通常會看到：

你好，Node.js！
30
undefined
object

這兩個練習展示：核心語言行為相同，但環境提供的物件不同。

typeof 可以安全檢查未宣告的名稱；但對仍處於暫時性死區的 let／const 變數使用 typeof，仍會拋出錯誤。

本節重點

  • JavaScript 是程式語言。
  • ECMAScript 定義核心語言規則。
  • 引擎 負責執行 JavaScript。
  • 執行環境 提供引擎及額外平台能力。
  • 瀏覽器與 Node.js 不具有完全相同的 API。
  • 第三方框架不等於 JavaScript 本身。

最值得記住的一句話：

JavaScript 決定你怎樣寫程式；ECMAScript 規定語言行為；執行環境決定程式可以接觸甚麼外部功能。

Scroll to Top