js原型繼承的幾種方法

2021-08-29 07:41:40 字數 3980 閱讀 3271

首先建立乙個建構函式,並為其設定私有屬性和公有屬性。

// 定義乙個人類

function

person

(name)

}// 原型方法

person.prototype.

eat=

function

(food)

;

原型繼承有很多種方法,接下來就記錄下我已知的幾種方法。

第一種 原型鏈繼承

重點圈起來:將父類例項賦值給子類原型物件

// 建立子類、新增子類屬性。

function

arrange

(name)

}// 將父類例項賦值給子類原型物件

arrange.prototype =

newperson()

;// 將constructor指向本身,保證原型鏈不斷。

arrange.prototype.constructor = arrange;

//建立arrange新例項,也是person例項;

var newobj =

newarrange

('李四');

console.

log(newobj instanceof

person

)//true

console.

log(newobj instanceof

arrange

)//true

// 原型鏈繼承成功,可以訪問父類所有屬性;

console.

log(newobj)

console.

log(newobj.name)

// 李四

newobj.

sleep()

;// 李四正在睡覺!

newobj.

eat(

'蘋果');

// 李四正在吃:蘋果

newobj.

goshop

('香蕉');

// 李四叫你去買香蕉

第二種 構造繼承

重點圈起來:執行父構造,將this指向本身,拉取父私有屬性

// 建立子類、新增子類屬性。

function

arrange

(name)

arrange.prototype.

getname

=function()

var newobj =

newarrange

('李四');

console.

log(newobj)

console.

log(newobj.name)

//李四

newobj.

sleep()

// 李四正在睡覺!

newobj.

getname()

//我叫李四

第三種 組合繼承

重點圈起來:構造繼承與原型繼承組合。注意注釋區域,切勿在繼承時使用此方法重寫或新增方法,否則將會修改整個原型,導致崩塌。

// 建立子類、新增子類屬性。

function

arrange

(name)

// 將父類例項賦值給子類原型物件

arrange.prototype =

newperson()

;// 直接拉取父類例項繼承原型

// 將constructor指向本身,保證原型鏈不斷。

arrange.prototype.constructor = arrange;

// 下面這個方法會替換整個原型物件

// arrange.prototype =

// }

// 必須在原型例項繼承之後,在給子類原型新增方法,或重寫方法,請使用以下方法

arrange.prototype.

eat=

function()

; arrange.prototype.

addfn

=function()

var newobj =

newarrange

('王五');

console.

log(newobj)

newobj.

eat();

// 王五重寫了此方法

newobj.

addfn()

;// 王五新增了新方法

第四種 轉殖原型鏈繼承

重點圈起來: 將等待繼承的原型物件轉殖,再賦值給繼承的原型物件。此種方法會脫軌,不在同一原型鏈上

// 建立子類、新增子類屬性。

function

arrange

(name)

}// 建立轉殖型別

function

clone

(obj)

}// 使用clone建構函式繼承原型

arrange.prototype =

newclone

(person.prototype)

;// 將constructor指向本身,保證原型鏈不斷。

arrange.prototype.constructor = arrange;

//建立arrange新例項,也是clone例項,卻不在是person例項;

var newobj =

newarrange

('李四');

console.

log(newobj instanceof

person

)//false

console.

log(newobj instanceof

arrange

)//true

console.

log(newobj instanceof

clone

)//true

// 轉殖成功,可以訪問轉殖物件的原型物件;

console.

log(newobj)

console.

log(newobj.name)

// 李四

newobj.

eat(

'蘋果');

// 李四正在吃:蘋果

newobj.

goshop

('香蕉');

// 李四叫你去買香蕉

第五種 寄生組合繼承

重點圈起來: 將父類原型物件直接賦值給乙個空屬性的建構函式,再將空屬性的建構函式例項賦值給子類原型物件,其根本是為了解決父例項繼承的出現的兩次構造。

// 建立子類、新增子類屬性。

function

arrange

(name)}(

function()

; nullfn.prototype = person.prototype;

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

arrange.prototype =

newnullfn()

;// 將constructor指向本身,保證原型鏈不斷。

arrange.prototype.constructor = arrange;})

();var newobj =

newarrange

('老王');

console.

log(newobj)

newobj.

shop()

;// 老王去買好吃的,好吃就多吃點

newobj.

sleep()

;// 老王正在睡覺!

newobj.

eat(

'芭蕉');

// 老王正在吃:芭蕉

學習猶如逆水行舟,有舟就上。別問為什麼,吾乃不踩坑學不會系列。

js繼承的幾種方法

繼承的幾種方法 1.傳統形式 繼承過多沒用的東西 father.prototype.name hzl function father var father new father son.prototype father function son var son new son console.log...

JS實現繼承的幾種方法

call方法的第乙個引數的值賦值給類 即方法 中出現的 this call方法的第二個引數開始依次賦值給類 即方法 所接受的引數 call 相同,第二個引數為陣列型別,這個陣列中的每個元素依次賦值給類 即方法 所接受的引數 this 的指向,我們就是利用它的這個特性來實現繼承的。補充知識點 func...

js實現繼承的幾種方法

js實習繼承的幾種方法 1.for in繼承 function person function son var p new person var s new son for var k in p console.log s.name 水煮魚 console.log s.age 18 2.原型繼承 f...