js 6種繼承模式

2021-10-08 17:34:15 字數 2595 閱讀 9857

function person (name) 

}person.prototype.age = 16

// 原型鏈繼承

function children ()

children.prototype = new person() // children的原型物件children的例項

// 重點:讓新例項的原型等於父類的例項。

//      特點:1、例項可繼承的屬性有:例項的建構函式的屬性,父類建構函式屬性,父類原型的屬性。(新例項不會繼承父類例項的屬性!)

//      缺點:1、新例項無法向父類建構函式傳參。

//         2、繼承單一。

//         3、所有新例項都會共享父類例項的屬性。(原型上的屬性是共享的,乙個例項修改了原型屬性,另乙個例項的原型屬性也會被修改!)

var children = new children()

console.log(children.age) // 10

// 借用建構函式繼承

function children1 ()

var children1 = new children1()

console.log(children1.name) // xiaowei

console.log(children1.age) // undefined 沒有繼承person的原型屬性

//    特點:1、只繼承了父類建構函式的屬性,沒有繼承父類原型的屬性。

//       2、解決了原型鏈繼承缺點1、2、3。

//       3、可以繼承多個建構函式屬性(call多個)。

//       4、在子例項中可向父例項傳參。

//    缺點:1、只能繼承父類建構函式的屬性。

//       2、無法實現建構函式的復用。(每次用每次都要重新呼叫)

//       3、每個新例項都有父類建構函式的副本,臃腫。

// 組合繼承

function children2 (name)

children2.prototype = new person()

var children2 = new children2('xiaowei')

console.log(children2.name)

console.log(children2.age)

// 重點:結合了兩種模式的優點,傳參和復用

//    特點:1、可以繼承父類原型上的屬性,可以傳參,可復用。

//       2、每個新例項引入的建構函式屬性是私有的。

//    缺點:呼叫了兩次父類建構函式(耗記憶體),子類的建構函式會代替原型上的那個父類建構函式。

// 原型式繼承

// 先建立乙個函式容器, 用來殺輸出物件和承載繼承原型

function content(obj)

children3.prototype = obj

return new children3()

}var person = new person('xiaowei')

var children3 = content(person)

console.log(children3.age) // 10

console.log(children3.name) // xiaowei

// 重點:用乙個函式包裝乙個物件,然後返回這個函式的呼叫,這個函式就變成了個可以隨意增添屬性的例項或物件。object.create()就是這個原理。

//    特點:類似於複製乙個物件,用函式來包裝。

//    缺點:1、所有例項都會繼承原型上的屬性。

//       2、無法實現復用。(新例項屬性都是後面新增的)

// 寄生式繼承

function content1(obj)

children3.prototype = obj

return new children4()

}var person = new person()

function subobject (obj)

var children4 = subobject(person)

// 這個函式宣告之後可新增屬性

console.log(children4.name) // xiaowei1

// 重點:就是給原型式繼承外面套了個殼子。

//    優點:沒有建立自定義型別,因為只是套了個殼子返回物件(這個),這個函式順理成章就成了建立的新物件。

//    缺點:沒用到原型,無法復用。

// 寄生組合式繼承

// 寄生

function content2(obj)

f.prototype = obj

return new f()

}var con = content2(new person())

function sub ()

sub.prototype = con

con.constructor = sub

var sub1 = new sub()

console.log(sub1)

// 重點:修復了組合繼承的問題

JS 6種繼承方式

首先定義乙個父類 建構函式 function animal name 原型上面的方法 animal.prototype.eat function food 核心 將父類的例項作為子類的原型function dog dog.prototype newanimal 將animal的例項掛載到了dog的原...

js繼承6種方式實現

三 組合繼承 組合原型鏈繼承和借用建構函式繼承 常用 重點 結合了兩種模式的優點,傳參和復用 特點 1 可以繼承父類原型上的屬性,可以傳參,可復用。2 每個新例項引入的建構函式屬性是私有的。缺點 呼叫了兩次父類建構函式 耗記憶體 子類的建構函式會代替原型上的那個父類建構函式。繼承這些知識點與其說是物...

js繼承的6種方式

想要繼承,就必須要提供個父類,繼承誰,提供繼承的屬性 function person name person.prototype.age 10 給建構函式新增了原型屬性function per per.prototype newperson var per1 newper console.log p...