深入瞭解JavaScript中基於原型（prototype）的繼承機制

_Fatman發表於2021-02-04
JavaScript原型繼承

原型

前言

繼承是物件導向程式設計中相當重要的一個概念，它對幫助程式碼複用起到了很大的作用。

正文

Brendan Eich在建立JavaScript時，沒有選擇當時最流行的類繼承機制，而是借鑑Self，用到了基於原型（prototype）的繼承機制，這導致了JavaScript在繼承機制方面與Java、C++等基於類繼承機制的語言有著顯著的區別。

其具體在於—C++的多重繼承、Java的繼承和介面實現中都包含"類"的概念，它們傾向於在建立物件之前[1]已經規定了物件需要繼承的類和實現的介面,並且使用類與類之間的繼承方式。

而在JavaScript中沒有"類"的概念，在物件之後所繼承的物件也是可以發生動態變化的，並且使用的是物件與物件之間的繼承方式。

如果將JavaScript中由string，number，bigint，boolean，null，undefined，symbol組成的基礎型別與其對應的值都按下不表，餘下的引用型別與其對應的值將都存在著__proto__[2]屬性，指向繼承的原型物件[3]。

與__proto__存在於每個物件中不同，prototype屬性只存在於函式中，在預設的的情況下所有物件的__proto__屬性的值與其建構函式下的prototype屬性的值是一致的。

let obj = new Object();
obj.constructor === Object;//true
//obj的__proto__屬性的值與obj的建構函式的prototype屬性的值指向同一塊堆記憶體
obj.__proto__ === obj.constructor.prototype;//true
obj.__proto__ === Object.prototype;//true

在這裡插入圖片描述

所有函式的建構函式都指向Function：

Object.constructor === Function;//true
//Object的__proto__屬性的值與Object的建構函式的prototype屬性的值指向同一塊堆記憶體
Object.__proto__ === Object.constructor.prototype;//true
Object.__proto__ === Function.prototype;//true

Function.constructor === Function;//true
//Function的__proto__屬性的值與Function的建構函式的prototype屬性的值指向同一塊堆記憶體
Function.__proto__ === Function.constructor.prototype;//true
Function.__proto__ === Function.prototype;//true

在這裡插入圖片描述

Function的prototype屬性的原型指向Object.prototype： 

Object.prototype === Function.prototype.__proto__;//true

在這裡插入圖片描述

不單單是 Function 的prototype屬性的原型指向 Object.prototype ，幾乎所有的函式[4]的prototype屬性的原型指向 Object.prototype ，從V8的測試程式碼中可見一斑：
在這裡插入圖片描述
最後，位於原型頂點的是Object.prototype.__proto__，它指向 null： 

Object.prototype.__proto__ === null;//true
Object.prototype.constructor === Object;//true

在這裡插入圖片描述

根據以上邏輯畫的原型指向圖：
效果圖
為了加深理解，我將再定義一個建構函式：

function Person(){
	
}
Person.constructor === Function;//true
Person.__proto__ === Person.constructor.prototype;//true
Person.__proto__ === Function.prototype;//true

在這裡插入圖片描述
通過新定義的建構函式建立物件：

let person = new Person();
person.constructor === Person;//true
person.__proto__ === person.constructor.prototype;//true
person.__proto__ === Person.prototype;//true

在這裡插入圖片描述
根據以上邏輯畫的最終的原型指向圖：

在這裡插入圖片描述

結尾

瞭解JavaScript中基於原型（prototype）的繼承機制的重點在於捋清楚Object與Function的__proto__、constructor、prototype屬性的指向關係，再進一步瞭解Object和Function各自對應的值以及通過Function對應的值建立出來的物件的__proto__、constructor、prototype屬性的指向關係，就大功告成了。
聽起來可能有一點點繞，最好是動手畫一下圖，以後忘記的時候看一下自己畫的圖就又想起來了。
最後，本人才疏學淺，如有錯誤之處，還望各位不理賜教。

  1. 這裡的措辭最初為程式執行之前，後聯想到hotswap，特意改為物件建立後。 ↩︎

  2. 雖然__proto__已經被不推薦使用，但是為了更直觀，我在此文中獲取物件原型的方法都將通過物件的__proto__屬性，還望悉知。 ↩︎

  3. Object.prototype繼承的原型指向null。 ↩︎

  4. bind、apply和call沒有prototype屬性。 ↩︎

相關文章