JavaScript 創建命名空間的 5 種寫法對比

JavaScript 全局變量污染與命名衝突是大型項目的頭號隱患。命名空間模式通過「一個全局對象承載所有模塊」解決此問題。本文對比 5 種主流寫法，從結構、封裝性、壓縮友好度、調用便利性多維度分析，助你選型。

問題示例：聲明提前導致的覆蓋

var sayHello = function() { return 'Hello var'; };
function sayHello(name) { return 'Hello function'; }
sayHello(); // 輸出 "Hello var" —— 函數聲明被提前，變量聲明提前但賦值不提前，最終 var 覆蓋 function

**結論**：始終使用 `var/let/const` 聲明函數表達式，避免函數聲明提前帶來的不可預期行為。

五種命名空間寫法

1. 函數構造器模式（傳統 OOP 風格）

var NS = NS || {};
NS.Hello = function() {
    this.name = 'world';
};
NS.Hello.prototype.sayHello = function(_name) {
    return 'Hello ' + (_name || this.name);
};
var hello = new NS.Hello();
hello.sayHello(); // "Hello world"

• ✅ 支持 `new` 實例化、原型繼承。
• ❌ 代碼冗長，壓縮後 `prototype` 無法縮短（jQuery 用 `fn` 別名）。
• ❌ 必須 `new` 實例化才能調用。

2. JSON 對象字面量（最簡潔、最常用）

var NS = NS || {};
NS.Hello = {
    name: 'world',
    sayHello: function(_name) {
        return 'Hello ' + (_name || this.name);
    }
};
NS.Hello.sayHello('JS'); // "Hello JS" —— 無需實例化，直接調用

• ✅ 結構緊湊，壓縮極佳（屬性名可混淆）。
• ✅ 無需實例化，單例模式直觀。
• ❌ 所有成員皆 **public**，內部調用也必須加 `this.`，無私有變量支持。

3. 閉包 + 對象返回（經典模塊模式，支持私有成員）

var NS = NS || {};
NS.Hello = (function() {
    var self = {};           // 公共接口對象
    var name = 'world';      // 私有變量
    self.sayHello = function(_name) {
        return 'Hello ' + (_name || name); // 訪問私有變量
    };
    return self;             // 暴露公共接口
})();
NS.Hello.sayHello(); // "Hello world"

• ✅ 真正的**私有變量/函數**（閉包捕獲）。
• ✅ 內部調用無需 `this.`，直接用變量名。
• ❌ 內部調用公共方法需 `self.method()`，略顯繁瑣。

4. 閉包改進：返回字面量（內部調用無前綴，外部接口清晰）

var NS = NS || {};
NS.Hello = (function() {
    var name = 'world';
    var sayHello = function(_name) {
        return 'Hello ' + (_name || name); // 內部直接調用 sayHello()
    };
    return {
        sayHello: sayHello // 只暴露需要的公共接口
    };
})();

• ✅ 內部調用極其自然（無 `self.`/`this.`）。
• ✅ 明確控制暴露接口（私有默認，按需導出）。
• ✅ 結構清晰，推薦用於中大型模塊。

5. 函數實例化簡潔寫法（無需 new，結構緊湊）

var NS = NS || {};
NS.Hello = new function() {
    var self = this;
    var name = 'world';
    self.sayHello = function(_name) {
        return 'Hello ' + (_name || name);
    };
};
NS.Hello.sayHello('JS'); // "Hello JS" —— 直接調用，無需 new

• ✅ `new function() {}` 立即執行並返回實例，調用無需 `new`。
• ✅ `this` 指向該實例，內部用 `self` 保存引用，語義清晰。
• ❌ 不支持私有變量（除非結合閉包）。
• ⚠️ 較少見，團隊需統一風格。

綜合對比表

最佳實踐建議

1. 通用模塊：採用 **寫法 4 (閉包改進)**，平衡封裝性、可讀性、壓縮體積。
2. 工具庫/常量集：採用 **寫法 2 (JSON 字面量)**，極簡高效。
3. 需多實例/繼承：採用 **寫法 1 (構造器)** 或 ES6 `class`。
4. 項目規範：統一「頂層命名空間對象名」（如 `App`、`MyProject`），嚴禁污染 `window`。
5. 現代替代：ES Modules (`import/export`) 已成主流，構建工具 (Webpack/Vite/Rollup) 自動處理作用域隔離，**新項目優先用 ES Modules**，舊項目漸進遷移。

掌握這 5 種模式，既能維護舊代碼，也能在無構建環境下快速搭建模塊化架構。