淺談 JavaScript 的原型繼承(Prototype and Inheritance)與原型鏈
JavaScript Object Prototype 示意圖
在 JavaScript 中,每個Object（以下稱為物件）都有一個隱含的 [[Prototype]]屬性，它指向這個物件的原型(Prototype)。當試圖訪問物件的某個屬性時,如果這個物件本身沒有該屬性,那麼 JavaScript 引擎會繼續在它的 [[Prototype]] （aka prototype object) 上找這個屬性。這就是 JavaScript 的原型繼承(Prototypal Inheritance)與原型鏈(Prototype Chain)概念。
附註：這篇文章提到的 Object 都是以 object literal (object initializer) 來創造，不考慮構造函數與 class 的情況。
Prototype Object 範例
我們先來看看這段程式碼：
const person = {
name: 'John',
sayName() {
console.log(this.name);
}
}
const student = {
school: 'ABC'
};
// 將 person 設置為 student 的 Prototype Object
Object.setPrototypeOf(student, person);
// 訪問 student 的 Prototype Object person 上的 sayName 方法
student.sayName(); // 輸出 John
上面的程式碼中，我們將 person 設置為 student 的 Prototype Object，這樣 student 就可以access到 person 上的屬性和方法，這就是 JavaScript Prototype Object 的作用，實現物件間的繼承與共享。
這裡可能有個令人費解的片段：
Object.setPrototypeOf(student, person)
這是 ES6 提供的設定物件原型的方法。它接受兩個參數：第一個參數是要設置原型的物件、第二個參數是該物件的新原型。所以這行程式碼使 student 物件的隱式原型 [[Prototype]] 被設置為 person這個 Object。
這樣一來，當訪問 student 的屬性時，如果 student 不存在該屬性，就會去 person 物件上查找。student 物件就可以 access 到 person 的屬性與方法,實現了原型繼承。
看起來很麻煩？為什麼要這樣做？可以繼續往下看，或是跳過這個段落 ：
補充：proto屬性：[[Prototype]] & __proto__ 的差别
前面提到：
在 JavaScript 中，每個物件都有一個隱含的 [[Prototype]] 屬性，它指向該物件的 Prototype。但為什麼在上面的程式碼中我們不直接修改它？這是因為[[Prototype]]是隱含的，無法被我們直接訪問、存取（access）。而__proto__ 可以說是這個隱含屬性的 getter/setter 介面（可以 access）。
通過 __proto__ 我們可以設置物件的 Prototype Object:
// 通過 __proto__ 設置 Prototype Object
student.__proto__ = person;
student.sayName(); // John
但這種方式會有瀏覽器兼容性的問題，而且是過時的方式，我們不應該使用這個方法來修改prototype object。Object.setPrototypeOf 是更推薦的設定原型的方式。新增原型繼承物件最簡單的方法：Object.create()
Object.create() 是 JavaScript 中實現 Prototypal Inheritance 最簡單的方法。
它可以以一個物件為原型，創建一個新的物件。不需要先新增物件後再去修改。可以比較兩種方法：
const person = {
name: 'John'
};
// Object.create() 直接新增一個 student 物件並把他的原型指定為 person
const student1 = Object.create(person);
// Object.setPrototypeOf() 先新增一個 student 物件再將其原型對象指定為 person
const student2 = {};
Object.setPrototypeOf(student2, person);
結果上來說，兩者是幾乎相同的，但在MDN的文件中基於效能考量更建議使用Object.create()的方法而不是Object.setPrototypeOf(student, person)
總結
Prototype 是 JavaScript 的核心概念之一，是實現繼承的基礎。
- 每個 Object 都有一個內置的
[[Prototype]]指向 Prototype Object __proto__屬性可以訪問這個隱含的 Prototype- Prototype Object 可以繼續擁有自己的 Prototype，形成原型鏈(Prototype Chain)
Object.create()可以簡單實現基於原型的繼承- 構造函數和類也是基於原型模型實現繼承的。
結語
因為篇幅的關係，這篇文章提到的 Object 都是基於 object literal (object initializer) ，不考慮構造函數與 class 的情況，希望未來還有機會寫一篇相關分享～
如果有興趣，可以參考JS基本觀念: 原型鏈(prototype chain) 有提到更多以構造函數來講解原型鏈的概念，或是直接看MDN的文件：Inheritance and the prototype chain。
但因為這篇提到的概念是更底層的邏輯，我想在原理上應該是類似或相同的，只是語法上有所差異。如果喜歡這類的文章歡迎留言跟我說！有任何資訊錯誤也請務必留言告知，謝謝😊
你可能也想看
