上篇文章給大家分享了 js繼承中的原型鏈繼承

web前端tips：js繼承——原型鏈繼承

在文章末尾，我提到了

原型鏈的繼承，子類需要傳遞參數(shù)給父類的構(gòu)造函數(shù)，就無法通過直接調(diào)用父類的構(gòu)造函數(shù)來實(shí)現(xiàn)，需要通過中間的過程來傳遞參數(shù)

那這篇文章，也就能解決這個(gè)傳參問題了。

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

又叫經(jīng)典繼承，它通過在子類構(gòu)造函數(shù)中調(diào)用父類構(gòu)造函數(shù)來繼承父類的屬性和方法。

借用構(gòu)造函數(shù)繼承的核心思想是，在子類構(gòu)造函數(shù)中使用?call()?或?apply()?方法調(diào)用父類構(gòu)造函數(shù)，并將子類實(shí)例作為參數(shù)傳遞給父類構(gòu)造函數(shù)。這樣就能夠在子類實(shí)例中創(chuàng)建父類的屬性，并且每個(gè)子類實(shí)例都有它們自己的屬性副本。

以下是借用構(gòu)造函數(shù)繼承的基本步驟：

1. 定義父類構(gòu)造函數(shù)，設(shè)置父類的屬性和方法。

2. 定義子類構(gòu)造函數(shù)，使用?Parent.call(this, ...)?在子類中調(diào)用父類構(gòu)造函數(shù)，并傳遞子類特有的參數(shù)。

3. 在子類構(gòu)造函數(shù)中定義子類的屬性和方法。

//?1
function?Parent(name)?{
??this.name?=?name??
??this.arr?=?[1,2,3]
}

//?2
function?Child(name,?age)?{
??//?借用父類構(gòu)造函數(shù)
??Parent.call(this,?name)
??this.age?=?age
}

//?實(shí)例化
var?child?=?new?Child('我是?child',?666)
child.name?//?我是?child
child.arr?//?[1,2,3]
child.age?//?666

通過以上步驟，我們就實(shí)現(xiàn)了簡(jiǎn)單的借用構(gòu)造函數(shù)繼承，也解決了原型鏈繼承傳參問題。

并且由于每個(gè)子類實(shí)例都有它們自己的屬性副本，所以對(duì)屬性修改是不會(huì)互相影響的：

var?child1?=?new?Child('我是?child1',?111)
var?child2?=?new?Child('我是?child2',?222)
child1.arr.push(4)
child1.arr?//?[1,2,3,4]
child2.arr?//?[1,2,3]

優(yōu)點(diǎn)

• 子類實(shí)例具有獨(dú)立的屬性，不會(huì)共享父類實(shí)例的屬性。

• 子類可以向父類構(gòu)造函數(shù)傳遞參數(shù)。

缺點(diǎn)

• 無法繼承父類原型鏈上的方法和屬性，只能繼承父類構(gòu)造函數(shù)中的屬性和方法。

function?Parent(name)?{
??this.arr?=?[1,2,3]
}
Parent.prototype.getArr?=?function()?{
??return?this.arr
}
function?Child()?{
??//?借用父類構(gòu)造函數(shù)
??Parent.call(this)
}
//?實(shí)例化
var?child?=?new?Child()
child.getArr()?//?Uncaught?TypeError:?child.getArr?is?not?a?function

• 父類的方法無法復(fù)用，每個(gè)子類實(shí)例都會(huì)創(chuàng)建一份方法的副本。

需要注意的是，借用構(gòu)造函數(shù)繼承只是繼承了父類構(gòu)造函數(shù)中的屬性和方法，并沒有真正實(shí)現(xiàn)完全的繼承。如果希望子類也能繼承父類的原型鏈上的方法和屬性，可以使用其他方式，如組合繼承、寄生組合繼承等。

結(jié)語(yǔ)

牽手 持續(xù)為你分享各類知識(shí)和軟件 ，歡迎訪問、關(guān)注、討論 并留下你的小心心?