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(); // 對(duì) SubType 得原型鏈重新指定，是原型鏈繼承
let instance = new SubType();
console.log(instance.getSuperValue()); // true

還需要再額外說(shuō)明查找關(guān)系嗎？？不懂得工友可見(jiàn)這篇《歪理解？原型鏈中的函數(shù)和對(duì)象》

這里還是用代碼展示下它們的指向關(guān)系吧：

上面例子中有 1 個(gè)對(duì)象 instance ，兩個(gè)函數(shù)，SuperType 和 SubType 。函數(shù)是上帝，對(duì)象是基本物質(zhì)。

繼承來(lái)自?xún)煞矫妫?/p>

1. 繼承自祖先（遺產(chǎn)）；
2. 繼承自上帝（天賦）；

//  繼承自祖先（遺產(chǎn)）
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

當(dāng)然，我們并不是來(lái)講原型鏈的。重點(diǎn)是：點(diǎn)出原型鏈繼承的“問(wèn)題”??！

它的主要問(wèn)題出現(xiàn)在：原型中包含引用值的時(shí)候，原型中包含的引用值會(huì)在所有實(shí)例間共享。

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 是個(gè)數(shù)組，引用值，當(dāng)它共享給 SubType 的時(shí)候，用的是引用值，當(dāng)我們實(shí)例化的時(shí)候，如果其中一個(gè)實(shí)力對(duì)它做出了修改，將會(huì)影響到其它實(shí)例的引用。

其實(shí)，我們也知道，很少在業(yè)務(wù)代碼中這樣去寫(xiě)繼承：SubType.prototype = new SuperType() ，原型鏈繼承會(huì)造成復(fù)用的混亂，所以它基本不會(huì)被單獨(dú)使用。

構(gòu)造函數(shù)繼承

構(gòu)造函數(shù)繼承，也叫做：“盜用構(gòu)造函數(shù)”，“對(duì)象偽裝”或“經(jīng)典繼承”。

基本思路：在子類(lèi)構(gòu)造函數(shù)中用 apply()和 call()方法調(diào)用父類(lèi)構(gòu)造函數(shù)。

上一小節(jié)的例子改造為：

function SuperType() {
 this.colors = ["red", "blue", "green"];
}
function SubType() {
	SuperType.call(this) // 構(gòu)造函數(shù)繼承
}
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']

完美解決原型鏈繼承的問(wèn)題，但是它也有它的問(wèn)題，也是使用構(gòu)造函數(shù)模式自定義類(lèi)型的問(wèn)題，

即：必須在構(gòu)造函數(shù)中定義方法（在原型上定義方法，子類(lèi)是訪(fǎng)問(wèn)不到的），函數(shù)不能重用。

function SuperType() {
}
function SubType() {
	SuperType.call(this) // 構(gòu)造函數(shù)繼承
}
SuperType.prototype.fn = ()=>{}
let s1 = new SubType()
console.log(s1.fn) // undefined

function SuperType() {
	 this.fn=()=>{}
}
function SubType() {
	SuperType.call(this) // 構(gòu)造函數(shù)繼承
}
let s1 = new SubType()
let s2 = new SubType()
console.log(s1.fn === s2.fn) // false

而這一點(diǎn)，在原型鏈繼承中，又是可以的。。。

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

所以，綜上，原型鏈繼承和構(gòu)造函數(shù)繼承的 “毛病” 分別是：

原型鏈繼承：所有繼承的屬性和方法都會(huì)在對(duì)象實(shí)例間共享，無(wú)法做到實(shí)例私有。
構(gòu)造函數(shù)繼承：子類(lèi)不能訪(fǎng)問(wèn)父類(lèi)原型上的方法。

咱就是說(shuō)，這東西怎么這么擰巴呢。。。

于是乎一個(gè)規(guī)避二者“毛病”的繼承方式出現(xiàn)了：組合繼承~~

組合繼承

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

思路是：使用原型鏈繼承原型上的屬性和方法，而通過(guò)構(gòu)造函數(shù)繼承實(shí)例屬性。

function SuperType(name){
	 this.name = name;
	 this.colors = ["red", "blue", "green"];
}
function SubType(name, age){
	 SuperType.call(this, name) // 構(gòu)造函數(shù)繼承
	 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

組合繼承，總結(jié)起來(lái)就是，屬性（特別是引用值）通過(guò)構(gòu)造函數(shù)去繼承，而公用的、需要復(fù)用的方法用原型鏈去繼承！！

說(shuō)實(shí)話(huà)，JS 繼承真的很奇怪。。。并不是面向?qū)ο笳Z(yǔ)言，又要通過(guò)原型鏈去模擬面向?qū)ο?，真的很多小坑的點(diǎn)需要去注意。(哈哈哈，想想還是函數(shù)式好，清晰)

以上就是JS精髓原型鏈繼承及構(gòu)造函數(shù)繼承問(wèn)題糾正的詳細(xì)內(nèi)容，更多關(guān)于JS原型鏈繼承構(gòu)造函數(shù)繼承的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: