js繼承的幾種方式

2021-10-03 05:10:26 字數 3335 閱讀 2468

想要實現繼承,首先就得有個父類(建構函式)來提供屬性和方法。

function

father

(name)

father.prototype.age=

'40'

//父類原型中的屬性

1、借用建構函式繼承

var

son=

function()

var son=

newson

('小明'

)console.

log(son)

//

此時son函式只是通過call方法在子級建構函式中呼叫父級建構函式

也就是說只繼承了父類建構函式的屬性,沒有繼承父類原型的屬性。

此時可以通過instanceof方法進行判斷

console.

log(son instanceof

father

)//false

2、通過原型鏈繼承

var

son=

function

(name)

son.prototype=

newfather()

var xiaoming=

newson

('小明'

)console.

log(xiaoming)

//console.

log(xiaoming.__proto__==son.prototype)

//true

console.

log(xiaoming.__proto__.__proto__==father.prototype)

//true

console.

log(xiaoming.age)

//40 通過原型鏈查詢

son繼承了father建構函式中的name屬性以及原型中的age屬性,

son的原型物件小明繼承了son建構函式中的sonname屬性、father建構函式中的name屬性以及原型中的age屬性,但是只能傳值給son,不能傳值給father。

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

var

son=

function()

son.prototype=

newfather()

var son=

newson

('小明'

)console.

log(son)

//console.

log(son.age)

//40

結合1、2兩種繼承方法,解決了無法繼承原型屬性、方法以及不能傳參的問題。實際上子類上會擁有父類的兩份屬性,只是子類的屬性覆蓋了父類的屬性(father.call(),new father())

4、拷貝繼承

通過for…in,把父類物件和原型物件上可列舉的屬性和方法迴圈賦值到son的原型上

function

son(name)

son.prototype.name=name

}var son=

newson

('leo'

)console.

log(son)

這種方法無法獲取父類不可列舉的方法,同時因為要拷貝父類的屬性和方法,記憶體占用比較高,效率較低。

5、原型式繼承

採用原型式繼承並不需要定義乙個類,傳入引數obj,生成乙個繼承obj物件的物件。類似於複製乙個物件,用函式進行包裝。但是它不是類式繼承,而是原型式基礎,缺少了類的概念。

function

objectcreate

(obj)

f.prototype=obj

return

newf()

}var son=

newfather

('son');

var son=

objectcreate

(son)

var objson=object.

create

(son)

;console.

log(son.name)

//son

console.

log(objson.name)

//son

console.

log(son.__proto__==son)

//true

6、寄生式繼承建立乙個僅僅用於封裝繼承過程的函式,然後在內部以某種方式增強物件,最後返回物件

function

objectcreate

(obj)

f.prototype=obj

return

newf()

}var son=

newfather()

;function

subobject

(obj)

var son=

subobject

(son)

console.

log(son.name)

//son

7、寄生組合式繼承結合寄生式繼承和組合式繼承,完美實現不帶兩份超類屬性的繼承方式,但是太過繁雜,感覺還不如組合式繼承。

function

objectcreate

(obj)

f.prototype=obj

return

newf()

}var middle=

objectcreate

(father.prototype)

//middle的原型繼承了父類函式的原型

function

son(

)son.prototype=middle;

middle.construtor=son;

//修復例項

var son=

newson

('son');

console.

log(son)

//

js繼承幾種方式

js作為物件導向的弱型別語言,繼承也是其非常強大的特性之一。那麼如何在js中實現繼承呢?讓我們拭目以待。既然要實現繼承,那麼首先我們得有乙個父類,如下 定義乙個動物類 function animal name 原型方法 animal.prototype.eat function food 核心 將父...

幾種js的繼承方式

1 繼承第一種方式 物件冒充 function super username function sub username var supernew new super super var subnew new sub sub supernew.hello subnew.hello subnew.wo...

js的幾種繼承方式

方式一 原型鏈繼承 function parent parent.prototype.getparentname function 子類 function child 下面這步實現繼承,這步需要放在getchildname 之前,不然獲得子類方法無法使用 child.prototype new pa...