繼承是為了子類可以使用父類的所有功能汰蓉,并且能對這些功能進行擴展染服。
1. 構造函數(shù)繼承(call&apply)
說明:直接利用call或者apply方法將父類構造函數(shù)的this綁定為子類構造函數(shù)的this就可以讼昆;
缺點:無法繼承原型鏈上的屬性與方法儿惫;
function Parent1() {
this.name = 'parent1'
}
Parent1.prototype.say = function () {
console.log(this.name)
}
function Child1() {
Parent1.call(this) //構造函數(shù)繼承核心代碼
this.type = 'child1'
}
let child1_1 = new Child1()
console.log(child1_1.name) // parent1
console.log(child1_1.say()) // child1_1.say is not a function
2. 原型繼承
說明:將子類的原型掛載到父類上陡叠;
缺點:子類new出來的實例,父類的屬性沒有隔離籽御,會相互影響练慕;
function Parent2() {
this.name = 'parent2'
this.arr = [1, 2, 3]
}
Parent2.prototype.say = function () {
console.log(this.name)
}
function Child2() {
this.type = 'child2'
}
Child2.prototype = new Parent2() //原型繼承核心代碼
let child2_1 = new Child2()
let child2_2 = new Child2()
console.log(child2_1.name) // parent2
console.log(child2_1.say()) // parent2
child2_1.arr.push(4)
console.log(child2_1.arr, child2_2.arr) // [1, 2, 3, 4] [1, 2, 3, 4]
3. 組合繼承
說明:組合上面的構造函數(shù)與原型繼承的功能;
缺點:call()方法已經(jīng)拿到父類所有的屬性 技掏,后面再使用原型時也會有父類所有屬性铃将;
function Parent3() {
this.name = 'parent3'
this.arr = [1, 2, 3]
}
Parent3.prototype.say = function () {
console.log(this.name)
}
function Child3() {
Parent3.call(this)
this.type = 'child3'
}
Child3.prototype = new Parent3()
let child3_1 = new Child3()
let child3_2 = new Child3()
child3_1.arr.push(4)
console.log(child3_1.arr, child3_2.arr) // [1, 2, 3, 4] [1, 2, 3]
// 缺點是 Parent3執(zhí)行了兩次,child3中有重復屬性
4. 寄生組合繼承
說明:解決組合繼承重復屬性的問題,直接將子類的原型等于父類的原型哑梳,或者是用Object.create繼承原型但不執(zhí)行父類構造函數(shù)劲阎;
注意處理子類實例的 constructor 指向問題,new Parent2()也有這個問題鸠真;
function Parent4() {
this.name = 'parent4'
this.arr = [1, 2, 3]
}
Parent4.prototype.say = function () {
console.log(this.name)
}
function Child4() {
Parent4.call(this)
this.type = 'child4'
}
//子類的原型等于父類的原型
Child4.prototype = Parent4.prototype
//或 Child4.prototype = Object.create(Parent4.prototype)
//修復重寫子類原型導致子類constructor屬性被修改
Child4.prototype.constructor = Child4
let child4_1 = new Child4()
let child4_2 = new Child4()
child4_1.arr.push(4)
console.log(child4_1.arr, child4_2.arr) // [1, 2, 3, 4] [1, 2, 3]
console.log(child4_1.constructor === Child4) // true
console.log(child4_1.constructor === Parent4)// false
// 這里的Child4就是一個繼承自Function的函數(shù)對象
console.log(Child4.constructor === Parent4) // false
5. Class繼承
說明:ES6新增悯仙,class是一個語法糖,就是基于寄生組合繼承來實現(xiàn)的吠卷;
class Parent5{
constructor(){
this.name = 'Parent5'
this.arr = [1, 2, 3]
}
say(){
console.log(this.name)
}
}
class Child5 extends Parent5{
constructor(){
super() //通過super()調(diào)用父類構造函數(shù)
this.type="Child5"
}
}
let child5_1 = new Child5()
let child5_2 = new Child5()
child5_1.arr.push(4)
console.log(child5_1.say()) // Parent5
console.log(child5_1.arr, child5_2.arr) // [1, 2, 3, 4] [1, 2, 3]
console.log(child5_1.constructor === Child5) // true
console.log(child5_2.constructor === Parent5) // false
1.ES6里Class的Extends繼承原理
寄生組合式繼承原理:
1.使用借用構造函數(shù)(call)來繼承父類this聲明的屬性/方法
2.通過寄生式封裝函數(shù)設置父類prototype為子類prototype的原型來繼承父類的prototype聲明的屬性/方法
- 《你不知道的JS》上卷 A.1
class 很好地偽裝成 JavaScript 中類和繼承設計模式的解決方案锡垄,但是它實際上起到了反作用:它隱藏了許多問題并且?guī)砹烁喔毿〉俏kU的問題。
補充:constructor的作用
constructor屬性不影響任何JavaScript的內(nèi)部屬性祭隔。instanceof檢測對象的原型鏈货岭,通常你是無法修改的(不過某些引擎通過私有的proto屬性暴露出來)。
constructor其實沒有什么用處疾渴,只是JavaScript語言設計的歷史遺留物千贯。由于constructor屬性是可以變更的,所以未必真的指向?qū)ο蟮臉嬙旌瘮?shù)程奠,只是一個提示丈牢。不過,從編程習慣上瞄沙,我們應該盡量讓對象的constructor指向其構造函數(shù)己沛,以維持這個慣例。
作者:賀師俊
鏈接:https://www.zhihu.com/question/19951896/answer/13457869
補充:new與Object.create()區(qū)別
- new創(chuàng)建一個對象距境,執(zhí)行構造函數(shù)申尼。
- Object.create相當于創(chuàng)建一個對象,但是不執(zhí)行構造函數(shù)垫桂。
function Parent(){
this.name="Parent"
}
Parent.prototype.age = '18'
let child_new = new Parent()
let child_create = Object.create(Parent.prototype)
console.log(child_new instanceof Parent) // true
console.log(child_create instanceof Parent) // true
console.log(child_new.name,child_new.age) // Parent 18
console.log(child_create.name,child_create.age) // undefined "18"
//簡單模擬下 Object.create 如下:
function create(obj) {
let F = function () {}
F.prototype = obj
return new F()
}