JS精粹,原型鏈繼承和構造函數繼承的“毛病”

先從面向對象講起,本瓜認爲:面向對象編程,它的最大能力就是:複用!

咱常說,面向對象三大特點,封裝、繼承、多態。

這三個特點,以“繼承”爲核心。封裝成類,是爲了繼承,繼承之後再各自發展(重寫),可理解爲多態。所以,根本目的是爲了繼承,即“複用“!

如果你用 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

所以,綜上,原型鏈繼承和構造函數繼承的 “毛病” 分別是:

  1. 原型鏈繼承:所有繼承的屬性和方法都會在對象實例間共享,無法做到實例私有。
  2. 構造函數繼承:子類不能訪問父類原型上的方法。

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

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

組合繼承

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

思路是:使用原型鏈繼承原型上的屬性和方法,而通過構造函數繼承實例屬性。

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 繼承真的很奇怪。。。並不是面嚮對象語言,又要通過原型鏈去模擬面向對象,真的很多小坑的點需要去注意。(哈哈哈,想想還是函數式好,清晰)

我是掘金安東尼 100 萬閱讀量人氣前端技術博主 INFP 寫作人格堅持 1000 日更文 ✍ 關注我,陪你一起度過漫長編程歲月

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。