天天看點

javascript中的繼承方式有哪些

javascript中的繼承方式有原型鍊繼承、借用構造函數繼承、組合繼承、原型式繼承、寄生式繼承和寄生組合式繼承。其中組合繼承是我們平時最常用的一種繼承方式。

在javascript中如果想要繼承,那麼我們就必須先提供一個父類,我們這裡以Person來作為父類。

下文中所有構造函數名均無實際意義,如Coder、Rocker等,僅用于舉例

javascript中的繼承方式有哪些

一、原型鍊繼承

javascript中的繼承方式有哪些

重點:讓新執行個體的原型等于父類的執行個體。Programmer.prototype=new Person();

特點:執行個體可繼承的屬性有:執行個體的構造函數的屬性,父類構造函數屬性,父類原型 的 屬性。(新執行個體不會繼承父類執行個體的屬性!)

缺點:1、新執行個體無法向父類構造函數傳參。

   2、繼承單一。

   3、所有新執行個體都會共享父類執行個體的屬性。(原型上的屬性是共享的,一個執行個體修

    改了原型的屬性(per1.__proto__.sex=“female”,則per2.sex也會變成female),另

    一個執行個體的原型屬性也會被修改!)

二、借用構造函數繼承

javascript中的繼承方式有哪些

重點:用.call()和.apply()将父類構造函數引入子類函數(在子類函數中做了父類函數的自執行(複制))

特點:1、隻繼承了父類構造函數的屬性,沒有繼承父類原型的屬性。(由

    cod1.age是18而不是21可看出)

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

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

   4、在子執行個體中可向父執行個體傳參。

缺點:1、隻能繼承父類構造函數的屬性。

   2、無法實作構造函數的複用。(每次用每次都要重新調用)

   3、每個新執行個體都有父類構造函數的副本,臃腫。

三、組合繼承(組合原型鍊繼承和借用構造函數繼承)(常用)

javascript中的繼承方式有哪些

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

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

   2、每個新執行個體引入的構造函數屬性是私有的。

缺點:調用了兩次父類構造函數(耗記憶體),子類的構造函數會代替原型上的那

   個父類構造函數

四、原型式繼承

javascript中的繼承方式有哪些

重點:用一個函數包裝一個對象,然後傳回這個函數的調用,這個函數就變成了個可以随

意增添屬性的執行個體或對象。object.create()就是這個原理。

特點:類似于複制一個對象,用函數來包裝。

缺點:1、所有執行個體都會繼承原型上的屬性。

   2、無法實作複用。(新執行個體屬性都是後面添加的)

五、寄生式繼承

javascript中的繼承方式有哪些

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

優點:沒有建立自定義類型,因為隻是套了個殼子傳回對象(這個),這個函數順理成章就成了建立的新對象。

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

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

寄生:在函數内傳回對象然後調用

組合:1、函數的原型等于另一個執行個體。2、在函數中用apply或者call引入另一個構造函數,可傳參

javascript中的繼承方式有哪些

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

七、ES6中的Class和extends

javascript中的繼承方式有哪些