JavaScript 原型對象深度解析：原型鏈、繼承模式、ES6 class 底層機制與最佳實踐

核心概念：原型即「對象的模板對象」

JS **沒有類 (ES6 前)**，只有**對象**。每個對象內部有一個隱藏屬性 `[[Prototype]]` (訪問器 `__proto__`)，指向另一個對象 —— **原型對象**。屬性查找沿著原型鏈向上，直到 `null`。

三種創建對象並建立原型關係的方式

原型鏈圖解

const animal = { breathe() { console.log('breathing'); } };
const dog = Object.create(animal);
dog.bark = () => console.log('woof');

dog.breathe(); // 1. dog 無 breathe → 2. animal 有 → 執行
// 原型鏈: dog → animal → Object.prototype → null

關鍵屬性與方法

• `__proto__` (非標準但通用) / `Object.getPrototypeOf(obj)` — 獲取原型
• `Object.setPrototypeOf(obj, proto)` — 修改原型 (性能殺手，**禁用**)
• `prototype` — **僅函數擁有**，指向「由該構造函數創建的實例的原型」
• `constructor` — 原型對象上的屬性，指回構造函數 (可被篡改)
• `hasOwnProperty(prop)` — 判斷自有屬性 (不查原型鏈)
• `prop in obj` — 判斷含原型鏈

ES6 class 底層仍是原型

class Person {
    constructor(name) { this.name = name; }
    sayHi() { console.log(this.name); }
}
const p = new Person('Tom');

// 等價於
function Person(name) { this.name = name; }
Person.prototype.sayHi = function() { console.log(this.name); }

// 驗證
console.log(p.__proto__ === Person.prototype); // true
console.log(Person.prototype.constructor === Person); // true
console.log(Object.getPrototypeOf(p) === Person.prototype); // true

繼承模式對比

性能與最佳實踐

1. 方法定義在 `prototype` / `class` 體內，實例共享，節省內存
2. 避免修改內建原型 (`Array.prototype.xxx = ...`) —— 污染全局、破壞 `for...in`、阻礙引擎優化
3. 使用 `Object.create(null)`** 創建純字典對象，無原型鏈查找開銷
4. `__proto__` 僅調試用**，生產代碼用 `Object.getPrototypeOf`/`Reflect.getPrototypeOf`
5. 原型鏈過深 (>10) 影響查找速度**，扁平化設計