一張圖理解 JS 中的原型鏈

小珥_Boy發表於2019-03-08
JS原型

下圖表示了建構函式、原型、例項物件之間的關係：

原型鏈示意圖

上圖是根據下面的一些知識點和總結畫出來的：

  1. 所有的函式（不管是建構函式還是普通函式）都預設有一個 prototype 屬性，表示該函式的原型物件，且該原型物件都預設有一個 constructor 屬性，這個屬性指向擁有該原型物件的函式，如下有幾個例子：
Object === Object.prototype.constructor;            // true
Function === Function.prototype.constructor;        // true
Foo === Foo.prototype.constructor;                  // true
複製程式碼
  1. 所有的物件都有一個內部屬性 __proto__（[[Prototype]]），指向該物件的原型物件，因為在 JS 中是以物件為原型建立、例項化一個物件的。通常，物件內部屬性 __proto__ 與構造該物件的函式的 prototype 屬性的指向是一致的，下面也有幾個例子：
obj.__proto__ === Object.prototype;         // true
fn.__proto__ === Function.prototype;        // true
foo.__proto__ === Foo.prototype;            // true
複製程式碼
  1. 所有函式的內部屬性 __proto__ 都指向建構函式 Function 的原型物件（Function.prototype），因為所有函式都是 Function 建構函式構造出的例項物件，既然它是物件，就擁有內部屬性 __proto__。有意思的是 Function 建構函式的屬性 __proto__ 也是指向 Function.prototype，幾個例子如下：
Object.__proto__ === Function.prototype;        // true
Function.__proto__ === Function.prototype;      // true
Foo.__proto__ === Function.prototype;           // true
複製程式碼
  1. 所有原生引用型別（有 Function、Array、Number、String、Boolean、Date、RegExp 和 Error）和自定義引用型別（如圖中的 Foo）的預設原型物件的屬性 __proto__ 都是指向 Object.prototype；而原生引用型別 Object 的預設原型物件的屬性 __proto__ 則是指向 null。
Object.prototype.__proto__ === null;                    // true

Function.prototype.__proto__ === Object.prototype;      // true
Array.prototype.__proto__ === Object.prototype;         // true
Number.prototype.__proto__ === Object.prototype;        // true
String.prototype.__proto__ === Object.prototype;        // true
Boolean.prototype.__proto__ === Object.prototype;       // true
Date.prototype.__proto__ === Object.prototype;          // true
RegExp.prototype.__proto__ === Object.prototype;        // true
Error.prototype.__proto__ === Object.prototype;         // true

Foo.prototype.__proto__ === Object.prototype;           // true
複製程式碼

相關文章