JS精髓原型鏈繼承及建構函式繼承問題糾正

2022-06-15 14:02:36

前言

先從物件導向講起，本瓜認為：物件導向程式設計，它的最大能力就是：複用！

咱常說，物件導向三大特點，封裝、繼承、多型。

這三個特點，以“繼承”為核心。封裝成類，是為了繼承，繼承之後再各自發展（重寫），可理解為多型。所以，根本目的是為了繼承，即“複用“！

如果你用 JavaScript 物件導向的能力來程式設計的話，能想到的，也只供使用的就是：基於原型。

因為這門語言設計就是這樣，我們之前也提過：JavaScript的語言設計主要受到了Self（一種原型程式設計語言）和 Scheme（一門函數語言程式設計語言）的影響；

它複用的能力就是來自原型！

好了，有這個認知基礎，我們再看原型繼承。

原型鏈繼承

原型繼承最直接的一種實現就是：原型鏈繼承

ECMA-262 把原型鏈定義為 ECMAScript 的主要繼承方式。其基本思想就是通過原型繼承多個參照型別的屬性和方法。

我們來看看原型鏈繼承的程式碼實現：

function SuperType() {
	 this.property = true;
}
function SubType() {
	 this.subproperty = false;
}
SuperType.prototype.getSuperValue = function() {
 return this.property;
};
SubType.prototype.getSubValue = function () {
 return this.subproperty;
};
SubType.prototype = new SuperType(); // 對 SubType 得原型鏈重新指定，是原型鏈繼承
let instance = new SubType();
console.log(instance.getSuperValue()); // true

還需要再額外說明查詢關係嗎？？不懂得工友可見這篇《歪理解？原型鏈中的函數和物件》

這裡還是用程式碼展示下它們的指向關係吧：

上面例子中有 1 個物件 instance ，兩個函數，SuperType 和 SubType 。函數是上帝，物件是基本物質。

繼承來自兩方面：

1. 繼承自祖先（遺產）；
2. 繼承自上帝（天賦）；

//  繼承自祖先（遺產）
instance.__proto__ === SubType.prototype // true
SubType.prototype.__proto__ === SuperType.prototype // true
// 繼承自上帝（天賦）
SuperType.__proto__  === Function.prototype // true
SubType.__proto__  === Function.prototype // true
SuperType.prototype.__proto__ === Object.prototype // true
Object.prototype.__proto__ === null // true

當然，我們並不是來講原型鏈的。重點是：點出原型鏈繼承的“問題”！！

它的主要問題出現在：原型中包含參照值的時候，原型中包含的參照值會在所有範例間共用。

function SuperType() {
 this.colors = ["red", "blue", "green"];
}
function SubType() {}
SubType.prototype = new SuperType() // 原型鏈繼承
let s1 = new SubType()
let s2 = new SubType()
s1.colors.push("yellow")
console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green', 'yellow']

colors 是個陣列，參照值，當它共用給 SubType 的時候，用的是參照值，當我們範例化的時候，如果其中一個實力對它做出了修改，將會影響到其它範例的參照。

其實，我們也知道，很少在業務程式碼中這樣去寫繼承：SubType.prototype = new SuperType() ，原型鏈繼承會造成複用的混亂，所以它基本不會被單獨使用。

建構函式繼承

建構函式繼承，也叫做：“盜用建構函式”，“物件偽裝”或“經典繼承”。

基本思路：在子類建構函式中用 apply()和 call()方法呼叫父類別建構函式。

上一小節的例子改造為：

function SuperType() {
 this.colors = ["red", "blue", "green"];
}
function SubType() {
	SuperType.call(this) // 建構函式繼承
}
let s1 = new SubType()
let s2 = new SubType()
s1.colors.push("yellow")
console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green']

完美解決原型鏈繼承的問題，但是它也有它的問題，也是使用建構函式模式自定義型別的問題，

即：必須在建構函式中定義方法（在原型上定義方法，子類是存取不到的），函數不能重用。

function SuperType() {
}
function SubType() {
	SuperType.call(this) // 建構函式繼承
}
SuperType.prototype.fn = ()=>{}
let s1 = new SubType()
console.log(s1.fn) // undefined

function SuperType() {
	 this.fn=()=>{}
}
function SubType() {
	SuperType.call(this) // 建構函式繼承
}
let s1 = new SubType()
let s2 = new SubType()
console.log(s1.fn === s2.fn) // false

而這一點，在原型鏈繼承中，又是可以的。。。

function SuperType() {}
function SubType() {}
SuperType.prototype.fn = ()=>{}
SubType.prototype = new SuperType() // 原型鏈繼承
let s1 = new SubType()
console.log(s1.fn) // ()=>{}

function SuperType() {
	 this.fn=()=>{}
}
function SubType() {}
SubType.prototype = new SuperType() // 原型鏈繼承
let s1 = new SubType()
let s2 = new SubType()
console.log(s1.fn === s2.fn) // true

所以，綜上，原型鏈繼承和建構函式繼承的 “毛病” 分別是：

原型鏈繼承：所有繼承的屬性和方法都會在物件範例間共用，無法做到範例私有。
建構函式繼承：子類不能存取父類別原型上的方法。

咱就是說，這東西怎麼這麼擰巴呢。。。

於是乎一個規避二者“毛病”的繼承方式出現了：組合繼承~~

組合繼承

目前最流行的繼承模式是組合繼承！

思路是：使用原型鏈繼承原型上的屬性和方法，而通過建構函式繼承範例屬性。

function SuperType(name){
	 this.name = name;
	 this.colors = ["red", "blue", "green"];
}
function SubType(name, age){
	 SuperType.call(this, name) // 建構函式繼承
	 this.age = age;
}
SuperType.prototype.sayName = function() {
	 console.log(this.name);
}
SubType.prototype = new SuperType() // 原型鏈繼承
SubType.prototype.sayAge = function() {
	 console.log(this.age);
}
let s1 = new SubType("Nicholas", 29)
let s2= new SubType("Greg", 27)
s1.colors.push("yellow")
console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green']
s1.sayName() // Nicholas
s2.sayName() // Greg
s1.sayAge() // 29
s2.sayAge() // 27

組合繼承，總結起來就是，屬性（特別是參照值）通過建構函式去繼承，而公用的、需要複用的方法用原型鏈去繼承！！

說實話，JS 繼承真的很奇怪。。。並不是物件導向語言，又要通過原型鏈去模擬物件導向，真的很多小坑的點需要去注意。(哈哈哈，想想還是函數式好，清晰)

以上就是JS精髓原型鏈繼承及建構函式繼承問題糾正的詳細內容，更多關於JS原型鏈繼承建構函式繼承的資料請關注it145.com其它相關文章！

JS精髓原型鏈繼承及建構函式繼承問題糾正

目錄

前言

原型鏈繼承

建構函式繼承

組合繼承

熱門文章