關於js種繼承的六種實現方法以及其優缺點

2021-10-05 01:42:57 字數 1729 閱讀 4325

//實現繼承的幾種方式

//缺點:雖然改變了this的指向但是child建構函式並不會指向parent的原型鏈

let parent1 = function()

parent1.prototype.say=function()

let child1 = function()

let c1 = new child1()

typeerror: c1.say is not a function

//第2種方式 讓child的原型物件指向parent例項

//缺點:因為child的原型物件為parent的例項,c2例項物件會直接修改parent裡面的屬性

let parent2 = function()

let child2 = function()

child2.prototype = new parent2()

let c2 = new child2()

let c3 = new child2()

c2.arr.push(4)

console.log(c2.arr,c3.arr)//array(4) [1, 2, 3, 4] array(4) [1, 2, 3, 4]

//第3種方式 12混合使用

//缺點;重複例項化父級物件

let parent3 = function()

let child3 = function()

child3.prototype = new parent3()

let c4 = new child3()

let c5 = new child3()

c4.arr.push(4)

console.log(c4.arr,c5.arr)

//第4種方式 混合公升級 因為child3.prototype = new parent3() 而例項parent3繼承的是他的原型物件上的方法

//所以可以像下面這樣寫

//缺點:無法找到正確的找到child的constructor

let parent4 = function()

let child4 = function()

child4.prototype = parent4.prototype

let c6 = new child4()

let c7 = new child4()

console.log(c6.constructor) //輸出為parent4,實際上應該是child4

//第5種方式 使用obeject.create()方法

let parent5 = function()

let child5 = function()

child5.prototype = object.create(parent5.prototype)//此時的child的原型鏈已經指向了parent

child5.prototype.constructor = child5 //指明建構函式

let c8 = new child5()

console.log(c8.constructor)//child5

//第6種方式 使用es6語法建立

class parent6

}class child6 extends parent6

}let c9 = new child6('hhh')

console.log(c9.name,c9.type)//hhh child

js實現繼承的六種方式

原型鏈利用原型讓乙個引用型別繼承另外乙個引用型別的屬性和方法。建構函式,原型,例項之間的關係 每個建構函式都有乙個原型物件,原型物件包含乙個指向建構函式的指標,而例項都包含乙個指向原型物件的內部指標。原型鏈實現繼承例子 function supertype supertype.prototype.g...

js 實現繼承的六種方式

原型鏈 利用原型讓乙個引用型別繼承另外乙個引用型別的屬性和方法。建構函式,原型,例項之間的關係 每個建構函式都有乙個原型物件,原型物件包含乙個指向建構函式的指標,而例項都包含乙個指向原型物件的內部指標。原型鏈實現繼承例子 function supertype supertype.prototype....

js實現繼承的六種方式

原型鏈利用原型讓乙個引用型別繼承另外乙個引用型別的屬性和方法。建構函式,原型,例項之間的關係 每個建構函式都有乙個原型物件,原型物件包含乙個指向建構函式的指標,而例項都包含乙個指向原型物件的內部指標。原型鏈實現繼承例子 function supertype supertype.prototype.g...