JS 原型鏈深度解讀：從混亂到通透，掌握 90% 前端面試核心

前言：你是否也被這些原型鏈問題折磨過？

" 為什麼obj.toString()能調用卻不在自身屬性裏？"

"prototype和__proto__到底有什麼區別？"

" 用class定義的類和原型鏈是什麼關係？"

"修改原型對象為什麼會影響所有實例？"

作為 JavaScript 的核心機制，原型鏈是理解繼承、對象關係和內置方法的基礎，卻因其概念抽象、術語混淆和動態特性成為開發者的 "噩夢"。本文將從數據結構本質出發，通過 "概念拆解 + 代碼實證 + 場景對比" 的方式，幫你徹底搞懂原型鏈，從此告別 "死記硬背式學習"。

一、原型鏈基礎：從數據結構看透本質

在開始複雜的概念之前，我們先抓住原型鏈的本質 —— 它本質上是一種單向鏈表結構，用於實現對象間的屬性委託訪問。這種結構決定了它的行為特性，也帶來了獨特的優勢和陷阱。

1.1 原型鏈的 "三角關係"

理解原型鏈的核心是搞懂三個基本概念的關係：構造函數 (Constructor)、實例 (Instance) 和原型對象 (Prototype Object)。

// 構造函數（本質是函數對象）

function Person(name) {

     this.name = name;

}

// 原型對象（構造函數的prototype屬性指向它）

Person.prototype.sayHello = function() {

     console.log(\`Hello, \${this.name}\`);

};

// 實例對象（通過new創建）

const person = new Person("Alice");

這三者構成了原型鏈的基礎三角關係：

• 實例的__proto__屬性指向原型對象
• 原型對象的constructor屬性指向構造函數
• 構造函數的prototype屬性指向原型對象

用代碼驗證這個關係：

console.log(person.\_\_proto\_\_ === Person.prototype); // true

console.log(Person.prototype.constructor === Person); // true

console.log(person.constructor === Person); // true（通過原型鏈查找）

關鍵結論：new操作符的本質是創建一個實例對象，並讓實例的__proto__指向構造函數的prototype。

1.2 原型鏈的鏈表結構與查找規則

原型鏈之所以被稱為 "鏈"，是因為每個原型對象本身也是對象，它也有自己的__proto__屬性，形成鏈式結構：

// 原型鏈查找路徑

person.sayHello(); // 自身未找到 → 查person.\_\_proto\_\_（Person.prototype）→ 找到

person.toString(); // 自身未找到 → 查Person.prototype → 未找到 → 查Person.prototype.\_\_proto\_\_（Object.prototype）→ 找到

person.foo(); // 遍歷完整條鏈直到null → 未找到 → 返回undefined

原型鏈查找規則：

1. 訪問對象屬性時，先在對象自身查找
2. 若未找到，則通過__proto__訪問原型對象繼續查找
3. 以此類推，直到找到屬性或到達鏈的終點null
4. 整個過程是單向的，不能反向查找

用鏈表結構類比：

person → Person.prototype → Object.prototype → null

     ↑           ↑                ↑

實例        構造函數原型      頂層原型對象

性能提示：原型鏈查找是O(n)複雜度的線性搜索，鏈越長查找效率越低，應避免過深的原型鏈設計。

二、核心概念辨析：掃清術語迷霧

原型鏈的 confusion 很大程度來自於相似術語的混淆，我們需要精準區分每個概念的內涵和應用場景。

2.1 prototype vs proto：最易混淆的兩個概念

這兩個概念的區別可以用一句話概括：prototype是函數獨有的屬性，__proto__是對象實例的屬性。

// 函數才有prototype

function Foo() {}

console.log(Foo.prototype); // { constructor: Foo, \_\_proto\_\_: Object.prototype }

// 所有對象都有\_\_proto\_\_

const obj = {};

console.log(obj.\_\_proto\_\_ === Object.prototype); // true

console.log(Foo.\_\_proto\_\_ === Function.prototype); // true（函數也是對象）

最佳實踐：避免使用__proto__操作原型鏈，應使用標準方法Object.getPrototypeOf()和Object.setPrototypeOf()。

2.2 構造函數與原型對象的協作

構造函數和原型對象分工明確：構造函數負責初始化實例屬性，原型對象負責定義共享方法。

function Person(name) {

     // 實例獨有屬性（每個實例都有獨立副本）

     this.name = name;

     this.id = Date.now(); // 每次創建實例都生成新值

}

// 共享方法（所有實例共享同一個函數對象）

Person.prototype.sayHello = function() {

     console.log(\`Hello, \${this.name}\`);

};

const p1 = new Person("Alice");

const p2 = new Person("Bob");

console.log(p1.name === p2.name); // false（實例屬性獨立）

console.log(p1.sayHello === p2.sayHello); // true（原型方法共享）

這種設計的優勢是內存高效：共享方法只在原型對象中存儲一份，而非每個實例都複製一份。

2.3 繼承 vs 委託：JavaScript 的獨特實現

很多開發者誤以為 JavaScript 的原型鏈是 "繼承"，但更準確的描述是委託（delegation）：

• 繼承：傳統面向對象中是屬性和方法的複製
• 委託：JavaScript 中是屬性和方法的引用查找

// 這不是複製（繼承），而是委託

Person.prototype.sayHello = function() {};

// 修改原型會影響所有實例（因為是共享引用）

Person.prototype.sayHello = function() {

     console.log(\`Hi, \${this.name}\`); // 所有實例都會使用新方法

};

這種動態委託特性使得 JavaScript 可以在運行時修改對象的行為，但也帶來了維護挑戰。

三、ES6 class 與原型鏈：語法糖下的本質

ES6 引入的class語法讓代碼更接近傳統面向對象風格，但本質上仍是原型鏈的封裝。理解class與原型鏈的關係，能幫你避免 "語法糖陷阱"。

3.1 class 語法的原型鏈本質

// ES6 class寫法

class Animal {

     constructor(name) {

       this.name = name;

     }

        

     speak() {

       console.log(\`\${this.name} makes a noise\`);

     }

}

// 等價的ES5原型寫法

function Animal(name) {

     this.name = name;

}

Animal.prototype.speak = function() {

     console.log(this.name + " makes a noise");

};

Babel 等轉譯工具會將class代碼轉換為原型鏈代碼，證明class只是語法糖。

3.2 extends 實現的雙重原型鏈

extends關鍵字創建的繼承關係實際上建立了兩條原型鏈：

1. 子類實例的原型鏈（繼承實例方法）
2. 子類本身的原型鏈（繼承靜態方法）

class Dog extends Animal {

     constructor(name) {

       super(name); // 必須調用super()

     }

        

     bark() {

       console.log(\`\${this.name} barks\`);

     }

        

     static info() {

       return "Dogs are mammals";

     }

}

等價的原型鏈操作：

// 實例方法繼承鏈

Object.setPrototypeOf(Dog.prototype, Animal.prototype);

// 靜態方法繼承鏈

Object.setPrototypeOf(Dog, Animal);

驗證這兩條鏈：

// 實例方法鏈：Dog實例 → Dog.prototype → Animal.prototype

const dog = new Dog("Buddy");

console.log(dog.bark); // Dog.prototype（自身）

console.log(dog.speak); // Animal.prototype（繼承）

// 靜態方法鏈：Dog → Animal

console.log(Dog.info()); // Dog自身

console.log(Dog.prototype.constructor === Dog); // true

注意點：ES6 class 內部默認使用嚴格模式，且類方法不可枚舉，這與 ES5 原型方法不同。

四、原型鏈實戰：從基礎到高級應用

掌握原型鏈的最佳方式是通過實際場景練習，以下是開發中最常用的原型鏈技巧和模式。

4.1 實現繼承的三種方式對比

1. 原型鏈繼承（基礎版）

// 父類

function Parent() {

     this.name = "Parent";

}

Parent.prototype.getName = function() {

     return this.name;

};

// 子類

function Child() {}

// 核心：子類原型指向父類實例

Child.prototype = new Parent();

// 修復constructor指向

Child.prototype.constructor = Child;

const child = new Child();

console.log(child.getName()); // "Parent"（繼承成功）

缺點：父類實例屬性會被所有子類實例共享，容易導致意外修改。

2. 組合繼承（推薦）

function Parent(name) {

     this.name = name;

}

Parent.prototype.getName = function() {

     return this.name;

};

function Child(name, age) {

     // 繼承實例屬性

     Parent.call(this, name);    

     this.age = age;

}

// 繼承原型方法

Child.prototype = Object.create(Parent.prototype);

Child.prototype.constructor = Child;

const child = new Child("Alice", 18);

console.log(child.getName()); // "Alice"（正確繼承）

優勢：組合繼承解決了原型鏈繼承的共享問題，是 ES5 中最完善的繼承方式。

3. 寄生組合繼承（優化版）

function inheritPrototype(child, parent) {

     // 創建純淨的原型對象

     const prototype = Object.create(parent.prototype);

     prototype.constructor = child;

     child.prototype = prototype;

}

function Child(name, age) {

     Parent.call(this, name);

     this.age = age;

}

// 優化點：避免創建父類實例

inheritPrototype(Child, Parent);

優勢：比組合繼承更高效，避免了調用父類構造函數創建不必要的屬性。

4.2 原型鏈在實際開發中的應用

場景 1：擴展原生對象功能（謹慎使用）

// 為數組添加求和方法

Array.prototype.sum = function() {

     return this.reduce((acc, cur) => acc + cur, 0);

};

\[1, 2, 3].sum(); // 6

警告：修改原生對象原型可能導致命名衝突和兼容性問題，大型項目中應避免。

場景 2：創建無原型的純淨對象

// 創建沒有原型鏈的對象

const pureObj = Object.create(null);

console.log(pureObj.\_\_proto\_\_); // undefined

console.log(Object.getPrototypeOf(pureObj)); // null

// 用途：作為安全的哈希表

const map = Object.create(null);

map\["\_\_proto\_\_"] = "value"; // 不會污染原型鏈

優勢：純淨對象避免了原型鏈污染攻擊，適合作為數據容器。

場景 3：實現對象的類型判斷

// 更可靠的類型判斷函數

function getType(obj) {

     const type = Object.prototype.toString.call(obj);

     return type.slice(8, -1).toLowerCase();

}

getType(\[]); // "array"

getType(null); // "null"

getType(new Date()); // "date"

原理：利用Object.prototype.toString能準確返回對象類型的特性，這是原型鏈的典型應用。

五、原型鏈避坑指南：解決 90% 常見錯誤

原型鏈的動態特性和隱式行為容易導致難以調試的問題，這些常見陷阱你一定要避免。

5.1 誤區 1：混淆\_\_proto\_\_和 prototype

// 錯誤示例

function Foo() {}

Foo.\_\_proto\_\_.bar = function() {}; // 錯誤地修改了Function.prototype

// 正確做法

Foo.prototype.bar = function() {}; // 給實例添加方法

記住：prototype是函數用來定義實例方法的，__proto__是實例用來查找方法的。

5.2 誤區 2：直接修改實例的\_\_proto\_\_

// 不推薦的做法

const obj = {};

obj.\_\_proto\_\_ = Array.prototype; // 修改原型鏈

// 推薦做法

const betterObj = Object.create(Array.prototype);

原因：修改現有對象的原型鏈是非常緩慢的操作，會破壞 JavaScript 引擎的優化。

5.3 誤區 3：忘記修復 constructor 屬性

// 錯誤示例

function Child() {}

Child.prototype = Object.create(Parent.prototype);

// 此時Child.prototype.constructor === Parent（錯誤）

const child = new Child();

console.log(child.constructor === Child); // false（不符合預期）

// 正確做法

Child.prototype.constructor = Child; // 修復constructor指向

影響：錯誤的constructor可能導致類型判斷出錯，尤其是在序列化和反序列化場景。

5.4 誤區 4：原型鏈循環引用

// 危險操作：創建循環引用

const a = {};

const b = {};

a.\_\_proto\_\_ = b;

b.\_\_proto\_\_ = a; // 形成循環

// 訪問屬性會導致無限循環

a.foo; // 引擎會報錯或崩潰

原理：原型鏈本質是單向鏈表，循環引用違反了這一結構，會導致屬性查找進入死循環。

5.5 誤區 5：在原型上定義引用類型屬性

// 錯誤示例

function User() {}

User.prototype.tags = \[]; // 引用類型屬性

const u1 = new User();

const u2 = new User();

u1.tags.push("js");

console.log(u2.tags); // \["js"]（意外共享修改）

// 正確做法

function User() {

     this.tags = \[]; // 實例屬性

}

原因：原型上的引用類型屬性會被所有實例共享，應在構造函數中定義實例獨有的引用類型屬性。

六、原型鏈速查表：核心知識點彙總

6.1 關鍵屬性與方法

6.2 原型鏈關係圖

// 函數對象的原型鏈

Function → Function.prototype → Object.prototype → null

// 普通對象的原型鏈

{} → Object.prototype → null

// 數組的原型鏈

\[] → Array.prototype → Object.prototype → null

// 實例的原型鏈

new Foo() → Foo.prototype → Object.prototype → null

6.3 ES5 vs ES6 繼承實現對比

結語：原型鏈的哲學與價值

JavaScript 的原型鏈機制體現了它的設計哲學 ——簡單而靈活。不同於傳統面向對象的類繼承，原型鏈通過委託機制實現了更動態的對象關係。

掌握原型鏈不僅能幫你寫出更優雅的代碼，更能讓你理解：

• 為什麼[]能調用Array.prototype的方法
• 為什麼async/await本質是原型鏈上的語法糖
• 為什麼框架能通過原型鏈實現強大的擴展能力

原型鏈的學習沒有捷徑，建議你：

1. 畫原型鏈關係圖理解對象間的聯繫
2. 用Object.getPrototypeOf()實際驗證鏈結構
3. 分析內置對象（如 Array、Promise）的原型鏈設計

當你能自如地運用原型鏈解決實際問題，你對 JavaScript 的理解就進入了新的層次。記住，最好的學習方式是在實踐中不斷驗證和深化理解，原型鏈尤其如此。總而言之，一鍵點贊、評論、喜歡加收藏吧！這對我很重要！