一張圖理解 JS 中的原型鏈

小珥_Boy發表於2019-03-08

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

原型鏈示意圖

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

  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. 所有原生引用型別(有 FunctionArrayNumberStringBooleanDateRegExpError)和自定義引用型別(如圖中的 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
複製程式碼

相關文章