您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計疑難解答

JavaScript 對象屬性掛載差異：構造函數屬性 vs 原型屬性的實例訪問與內存影響

編輯：程式設計疑難解答

代碼對比

// 方式一：構造函數上直接掛載
function Aaa() {}
Aaa.a = 111;

// 方式二：原型鏈掛載
function Bbb() {}
Bbb.prototype.b = 111;

核心區別：屬性所在位置與實例訪問性

維度	構造函數屬性 (Aaa.a)	原型屬性 (Bbb.prototype.b)
屬性存儲位置	函數對象自身	函數的 `prototype` 對象
實例訪問 (`new Aaa()`)	不可訪問：實例無 `a` 屬性，原型鏈上也無	可訪問：實例通過原型鏈繼承 `b`
構造函數直接訪問	`Aaa.a` ✓	`Bbb.b` ✗（需 `Bbb.prototype.b`）
內存佔用（大量實例）	每實例無額外開銷（但屬性非共享）	所有實例共享同一屬性，節省內存
修改影響範圍	修改 `Aaa.a` 不影響已創建實例	修改 `Bbb.prototype.b` 即時影響所有實例（含已創建）

代碼驗證

function Aaa() {}
Aaa.a = 111;

function Bbb() {}
Bbb.prototype.b = 111;

const objA = new Aaa();
const objB = new Bbb();

console.log(objA.a); // undefined ❌
console.log(Aaa.a);  // 111 ✓

console.log(objB.b); // 111 ✓
console.log(Bbb.b);  // undefined ❌
console.log(Bbb.prototype.b); // 111 ✓

實戰指導原則

方法/共享屬性 → 放入 prototype：所有實例共用同一函數引用，節省內存，符合「原型繼承」語義。
實例私有數據 → 放入構造函數內部 (this.xxx)：每個實例擁有獨立副本，互不干擾。
靜態工具屬性/常量 → 掛載構造函數本身：如 Array.isArray、Math.PI，通過類名調用，無需實例化。

ES6 Class 語法對應

class Bbb {
  constructor() {
    this.instanceProp = 100; // 私有實例屬性
  }
  static staticProp = 200;   // 對應構造函數屬性 Bbb.staticProp
  get protoProp() { return 300; } // 對應原型訪問器/方法
}

理解「構造函數是函數對象，prototype 是普通對象，實例通過 __proto__ 指向 prototype」這一原型鏈核心圖景，即可靈活掌握屬性掛載策略。