20 js繼承的6種方式

2022-06-02 18:57:08 字數 1898 閱讀 8122

想要繼承,就必須要提供個父類(繼承誰,提供繼承的屬性)

一、原型鏈繼承

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

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

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

2、繼承單一。

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

二、借用建構函式繼承

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

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

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

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

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

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

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

三、組合繼承(組合原型鏈繼承和借用建構函式繼承)(常用)

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

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

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

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

四、原型式繼承

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

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

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

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

五、寄生式繼承

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

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

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

六、寄生組合式繼承(常用)

寄生:在函式內返回物件然後呼叫

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

繼承這些知識點與其說是物件的繼承,更像是函式的功能用法,如何用函式做到復用,組合,這些和使用繼承的思考是一樣的。上述幾個繼承的方法都可以手動修復他們的缺點,但就是多了這個手動修復就變成了另一種繼承模式。

這些繼承模式的學習重點是學它們的思想,不然你會在coding書本上的例子的時候,會覺得明明可以直接繼承為什麼還要搞這麼麻煩。就像原型式繼承它用函式複製了內部物件的乙個副本,這樣不僅可以繼承內部物件的屬性,還能把函式(物件,**內部物件的返回)隨意呼叫,給它們新增屬性,改個引數就可以改變原型物件,而這些新增的屬性也不會相互影響。

**

js繼承的6種方式

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

js繼承6種方式實現

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

JS 6種繼承方式

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