1. 程式人生 > >js繼承的幾種類型

js繼承的幾種類型

所有 一個 構造函數 urn 組合繼承 內存 原型鏈 define com

首先提供構造函數

技術分享圖片

1. 構造函數實現繼承

技術分享圖片

原理:改變函數上下文實現繼承(call,apply,return,bind)

return {}/function(){} 如果返回值是對象 那麽this指向這個對象 如果返回值不是一個對象 那麽this指向函數的實例

null/undefine/1 雖然null是對象 但是this依然指向函數的實例 其他都是指向函數的實例

call,apply第一個參數是null 那麽this指向的是windows對象

call,apply立即執行 bind想什麽時候執行就什麽時候執行

================================================================================================

特點: 1. 只繼承父類構造函數的屬性 沒有繼承父類原型屬性

2. 解決了原型鏈繼承缺點(無法向父類傳參 繼承單一 共享父類實例的屬性)

3. 可以繼承多個構造函數屬性

4. 在子實例中可向父實例傳參

缺點: 1.只能繼承父類構造函數的屬性

2. 無法實現構造函數的復用 每個新實例都有父類構造函數的副本,臃腫

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

二、原型鏈繼承

技術分享圖片

原理 : 構造器的原型是父構造器的實例

特點: 1. 實例可繼承原型鏈上的數據

2. 無法傳參 繼承單一 新實例會共享父類屬性

三、組合繼承(常用)

技術分享圖片

重點 結合兩種模式優點 傳參和復用

特點: 1. 可以繼承父類原型上的屬性,可以傳參,可復用。 2. 每個新實例引入的構造函數屬性是私有的。

缺點: 調用了兩次父類構造函數(耗內存),子類的構造函數會代替原型上的那個父類構造函數。

四、原型式繼承

技術分享圖片

重點:用一個函數包裝一個對象,然後返回這個函數的調用,這個函數就變成了個可以隨意增添屬性的實例或對象。object.create()就是這個原理。

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

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

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

五、寄生繼承

技術分享圖片

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

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

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

五、寄生式繼承

技術分享圖片

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

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

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

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

寄生:在函數內返回對象然後調用

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

技術分享圖片

js繼承的幾種類型