JS實現繼承的6種方式

2021-10-24 06:02:07 字數 2015 閱讀 1205

將建構函式的原型設定為另乙個建構函式的例項物件,這樣就可以繼承另乙個原型物件的所有屬性和方法,可以繼續往上,最終形成原型鏈。

function

wonman

(name)

let wonmanobj =

newwonman()

;

優點:

不限制呼叫方式

簡單,易實現

缺點:不能多次繼承

為了解決原型中包含引用型別值的問題,開始使用借用建構函式,也叫偽造物件或經典繼承

function

woman

(name)

let womanobj =

newwoman()

;

也叫偽經典繼承,將原型鏈和借用建構函式的技術組合到一塊。使用原型鏈實現對原型屬性和方法的繼承,而通過建構函式來實現對例項屬性的繼承。
function

cat(name)

cat.prototype =

newanimal()

;// 感謝 @學無止境c 的提醒,組合繼承也是需要修復建構函式指向的。cat.prototype.constructor = cat;

// test code

var cat =

newcat()

;console.

log(cat.name)

;console.

log(cat.

sleep()

);console.

log(cat instanceof

animal);

// true

console.

log(cat instanceof

cat)

;// true

特點:

彌補了方式2的缺陷,可以繼承例項屬性/方法,也可以繼承原型屬性/方法

既是子類的例項,也是父類的例項

不存在引用屬性共享問題

可傳參函式可復用

缺點:呼叫了兩次父類建構函式,生成了兩份例項(子類例項將子類原型上的那份遮蔽了)

不自定義型別的情況下,臨時建立乙個建構函式,借助已有的物件作為臨時建構函式的原型,然後在此基礎例項化物件,並返回。

function

wonman

(name)

let wonmanobj =

newwonman()

;

優點:

不限制呼叫方式

簡單,易實現

缺點:不能多次繼承

其實就是在原型式繼承得到物件的基礎上,在內部再以某種方式來增強物件,然後返回

function

createanother

(original)

;return clone;

}

通過寄生的方式來修復組合式繼承的不足,完美的實現繼承

**核心:**通過寄生方式,砍掉父類的例項屬性,這樣,在呼叫兩次父類的構造的時候,就不會初始化兩次例項方法/屬性,避免的組合繼承的缺點

function

cat(name)

(function()

; super.prototype = animal.prototype;

//將例項作為子類的原型

cat.prototype =

newsuper()

;})(

);// test code

var cat =

newcat()

;console.

log(cat.name)

;console.

log(cat.

sleep()

);console.

log(cat instanceof

animal);

// true

console.

log(cat instanceof

cat)

;//true

js繼承6種方式實現

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

js繼承的6種方式

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

JS 6種繼承方式

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