ES5 中6 種方式實現繼承,各自優缺點

2021-10-04 06:23:15 字數 3791 閱讀 2109

function

father

(name)

father.prototype.

sayname

=function()

function

son(name)

son.prototype =

newfather()

;son.prototype.constructor = son;

var test1 =

newson()

;test1.hobby.

push

('打牌'

)test1.hobby // ["掙錢", "打小孩", "打牌"]

var test2 =

newson()

;test2.hobby // ["掙錢", "打小孩", "打牌"]

在建立子型別的例項時,沒有辦法再不影響所有物件例項的情況下,改變屬性

function

father

(name)

father.prototype.

sayname

=function()

function

son(name)

var test1 =

newson

('兒子'

)test1.hobby.

push

('打牌'

)test1.hobby // ["掙錢", "打小孩", "打牌"]

var test2 =

newson()

;test2.hobby // ["掙錢", "打小孩"]

優點:解決了屬性值被所有例項共享的缺點

缺點:父方法裡面的原型方法,對於子是不可見的

function

father

(name)

father.prototype.

sayname

=function()

function

son(name)

son.prototype =

newfather()

;son.prototype.constructor = son;

var test1 =

newson

('兒子'

)test1.hobby.

push

('打牌'

)test1.hobby // ["掙錢", "打小孩", "打牌"]

var test2 =

newson()

;test2.hobby // ["掙錢", "打小孩"]

優點:上面兩個優點結合

缺點:無論是什麼情況,都會呼叫兩次父函式,一次是在建立子類原型,一次是在子類建構函式內部

function

object

(target)

; fn.prototype = target;

return

newfn()

;}

在 object 函式內部,先傳入乙個臨時的建構函式,然後將這個傳入的物件作為整個建構函式的原型,最後返回這個臨時型別的新例項,本質上是對傳入的物件的淺拷貝

es5 種有個object.create()方法 ,這個方法接受兩個引數,第乙個引數是作為新物件原型的的物件 和 第二個(可選)為新物件定義額外屬性的物件(可以覆蓋原型物件上的同名屬性)

object.create 與 上面的object 方法原理相同

var person =

var person1 = object.

create

(person)

person1.name =

'person1'

;person1.hobbies.

push

('花錢'

)var person2 = object.

create

(person)

person2.name =

'person2'

;person2.hobbies.

push

('打架'

)person1.hobbies // ["學習", "打球", "花錢", "打架"]

person2.hobbies // ["學習", "打球", "花錢", "打架"]

person1.name // person1

person2.name // person2

優點:在沒有必要建立建構函式,只是想讓乙個物件與另外乙個物件保持相似的情況,原型式繼承可以勝任

缺點:與原型鏈實現繼承一樣,引用型別的值會被所有例項共享

function

createanother

(original)

return clone;

}var person =

var person1 =

createanother

(person)

person1.hobbies.

push

('花錢'

)person1.

sayname()

;// 兒子 ["打牌", "逃課", "花錢"]

var person2 =

createanother

(person)

person2.

sayname()

;// 兒子 ["打牌", "逃課", "花錢"]

優點:在考慮物件而不是自定義型別和建構函式的情況下,寄生式繼承也是一種有用的方式

缺點:同原型鏈繼承一樣,包含了引用型別的屬性,會被所有例項共享

通過借用建構函式來繼承屬性,通過原型鏈的混成形式來繼承方法。

function

inheritprototype

(son, father)

function

father()

father.prototype.

say=

function()

function

son(

)// 繼承父類原型方法

inheritprototype

(son, father)

;son.prototype.

work

=function()

son.prototype.

say=

function()

var son =

newson()

;son.hobbies.

push

('兩都有'

)son.hobbies // ["喝酒", "兩都有"]

son.

say();

// 兒子

var father =

newfather()

;father.

say();

//爸爸

father.hobbies // ['喝酒']

優點:與上面第 3 方法相比, 父類只在子類建構函式中呼叫一次,實現屬性,方法繼承

es5實現繼承

繼承es5 這是乙個動物類 param age 年齡 param 性別 param name 名字 introduction 方法 function animal age,name 這是乙個貓類 param ingredients 食物 param age 年齡 當然你也可以在 這個類裡去呼叫ani...

ES5實現繼承

es5實現繼承 在面試過程中,常常會遇到一些es5,es6的問題,如果不能及時的想起來該如何讓面對,結果就可能是同學,你的面試就可能有點懸了,那麼,趕緊來一波乾貨吧 1,原型鏈繼承 原型鏈繼承的基本思想是利用原型讓乙個引用型別繼承另乙個引用型別的屬性和方法。function supertype su...

ES5實現繼承

繼承的含義 父類公有屬性和方法為子類公有屬性和方法 父類私有屬性和方法為子類私有屬性和方法 結合二者 function father name father.prototype.printname function 建構函式繼承 function son name,age 原型鏈繼承 son.pro...