原型繼承:子類
當在任何物件上呼叫任何屬性時,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 中的繼承重點就是建立原型鏈
。這讓我們可以子類化
,也就是建立一個“子”物件,讓它繼承“父”物件的大部分或全部屬性和方法。然後,我們可以分別實現任何子物件的獨特屬性和方法,同時仍然保留其父物件的資料和功能。
相關文章
- 原型,繼承——原型繼承原型繼承
- 類的繼承_子類繼承父類繼承
- 物件、原型鏈、類、繼承【上】物件原型繼承
- js 原型鏈實現類的繼承JS原型繼承
- 原型、原型鏈與繼承原型繼承
- 原型和繼承原型繼承
- 物件-原型-繼承物件原型繼承
- JS的物件導向(理解物件,原型,原型鏈,繼承,類)JS物件原型繼承
- Javascript繼承4:潔淨的繼承者—-原型式繼承JavaScript繼承原型
- JS原型鏈繼承JS原型繼承
- javascript - 繼承與原型鏈JavaScript繼承原型
- javascript的原型和繼承JavaScript原型繼承
- javascript原型鏈及繼承JavaScript原型繼承
- 徹底搞懂原型、原型鏈和繼承原型繼承
- 原型、原型鏈、new做了什麼、繼承原型繼承
- 建構函式、原型、原型鏈、繼承函式原型繼承
- 【機制】JavaScript的原型、原型鏈、繼承JavaScript原型繼承
- 面試題之原型、原型鏈、和繼承面試題原型繼承
- 小議JS原型鏈、繼承JS原型繼承
- 圖解JavaScript原型鏈繼承圖解JavaScript原型繼承
- es5 原型式繼承原型繼承
- JS的原型鏈和繼承JS原型繼承
- 原型繼承(翻譯 vjeux 文章)原型繼承UX
- javascript原型鏈繼承的使用JavaScript原型繼承
- 從babel實現es6類的繼承來深入理解js的原型及繼承Babel繼承JS原型
- 類的繼承繼承
- [JavaScript]原型、原型鏈、建構函式與繼承JavaScript原型函式繼承
- 淺談JS物件的建立、原型、原型鏈繼承JS物件原型繼承
- 徹底弄懂JS原型與繼承JS原型繼承
- JS中的繼承與原型鏈JS繼承原型
- javascript基礎-原型鏈與繼承JavaScript原型繼承
- 深入理解原型鏈和繼承原型繼承
- JavaScript原型與繼承的祕密JavaScript原型繼承
- 白話JavaScript原型鏈和繼承JavaScript原型繼承
- 子承父業-C#繼承C#繼承
- JS原型鏈、prototype、__proto__、原型鏈繼承詳解JS原型繼承
- Python類的繼承Python繼承
- C++ | 類繼承C++繼承