原型繼承:子類

moduzhang發表於2018-11-16

在這裡插入圖片描述

當在任何物件上呼叫任何屬性時,JavaScript 引擎將首先在該物件中查詢該屬性(即該物件自己的、非繼承的屬性)。如果沒有找到該屬性,JavaScript 將檢視該物件的原型。如果在物件原型中仍然找不到該屬性,則 JavaScript 將在原型鏈上繼續搜尋。JavaScript 中的繼承重點就是建立原型鏈

如果只繼承原型呢?

假設我們希望一個 Child 物件從一個 Parent 物件繼承。為什麼不應該只設定 Child.prototype = Parent.prototype 呢?

物件是通過引用來傳遞的。這意味著,由於 Child.prototype 物件和 Parent.prototype 物件引用的是同一個物件,因此你對 Child 的原型所作的任何更改也會被應用於 Parent 的原型!我們可不希望子物件能夠修改其父物件的屬性!最重要的是,這樣做不會建立原型鏈。

function GuineaPig (name) {
  this.name = name;
  this.isCute = true;
}

const waffle = new GuineaPig('Waffle');
// waffle.__proto__ 指向 GuineaPig.prototype

GuineaPig 的新例項被建立時,特殊屬性 waffle.__proto__ 會被設定為 GuineaPig.prototype。這個祕密連結允許 GuineaPig 建構函式的例項訪問 GuineaPig.prototype 的屬性。請記住,你不應該在你編寫的任何程式碼中使用 __proto__

Object.create()

我們可以藉助一種方式來自己設定物件的原型:使用 Object.create()。而且最棒的是,這種方式既可以讓我們管理繼承,同時又不會改變原型!

Object.create() 會接受一個物件作為引數,並返回一個新的物件,其 __proto__ 屬性會被設定為傳遞給它的引數。然後,你只需要將所返回的物件設定為子物件建構函式的原型即可。

const mammal = {
   vertebrate: true,
   earBones: 3
};

const rabbit = Object.create(mammal);

console.log(rabbit); //{}
console.log(rabbit.__proto__ === mammal); //true

這意味著,現在 rabbit 擴充套件了 mammal(即 rabbit 繼承自 mammal),而且 rabbit 可以將 mammal 的屬性當作自己的屬性一樣進行訪問!

Object.create() 是在 JavaScript 中建立原型繼承的一種實用方法。

JavaScript 中的繼承重點就是建立原型鏈。這讓我們可以子類化,也就是建立一個“子”物件,讓它繼承“父”物件的大部分或全部屬性和方法。然後,我們可以分別實現任何子物件的獨特屬性和方法,同時仍然保留其父物件的資料和功能。

繼承和原型鏈
Object.create()

相關文章