ES5實現繼承

2021-10-14 07:41:58 字數 4737 閱讀 1888

es5實現繼承

在面試過程中,常常會遇到一些es5,es6的問題,如果不能及時的想起來該如何讓面對,結果就可能是同學,你的面試就可能有點懸了,那麼,趕緊來一波乾貨吧

1,原型鏈繼承:

原型鏈繼承的基本思想是利用原型讓乙個引用型別繼承另乙個引用型別的屬性和方法。

function supertype(

) supertype.prototype.getname =

function()

function subtype(

) subtype.prototype = new supertype();

subtype.prototype.getage = function(

) subtype.prototype.constructor = subtype;

let instance1 = new subtype();

instance1.colors.push(

'yellow');

console.log(instance1.getname(

)); //yvette

console.log(instance1.colors)

;//[

'pink', 'blue', 'green','yellow'

]let instance2 = new subtype();

console.log(instance2.colors)

;//[

'pink', 'blue', 'green','yellow'

]

缺點:(1)通過原型來實現繼承時,原型會變成另乙個型別的例項,原先的例項屬性變成了現在的原型屬性,該原型的引用型別屬性會被所有的例項共享。

(2)在建立子型別的例項時,沒有辦法在不影響所有物件例項的情況下給超型別的建構函式中傳遞引數。

2,借用建構函式:

借用建構函式的技術,其基本思想為:在子型別的建構函式中呼叫超型別建構函式。

function supertype(name)

function subtype(name)

let instance1 = new subtype(

'yvette');

instance1.colors.push(

'yellow');

console.log(instance1.colors)

;//[

'pink', 'blue', 'green','yellow'

]let instance2 = new subtype(

'jack');

console.log(instance2.colors)

;//[

'pink', 'blue', 'green'

]

優點:可以向超類傳遞引數 解決了原型中包含引用型別值被所有例項共享的問題

缺點:方法都在建構函式中定義,函式復用無從談起,另外超型別原型中定義的方法對於子型別而言都是不可見的。

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

組合繼承是將原型鏈繼承和借用建構函式的技術,從而發揮了二者之長的一種繼承模式。

使用原型鏈實現對原型屬性和方法的繼承,通過借用建構函式來實現對例項屬性的繼承,既通過在原型上定義方法來實現了函式復用,又保證了每個例項都有自己的屬性。

// 缺點:

無論什麼情況下,都會呼叫兩次超型別建構函式:一次是在建立子型別原型的時候,另一次是在子型別建構函式內部。

優點:可以向超類傳遞引數

每個例項都有自己的屬性

實現了函式復用

function supertype(name)

supertype.prototype.sayname =

function()

function subertype(name, age)

subertype.prototype = new supertype();

subertype.prototype.constructor = subertype;

subertype.prototype.sayage =

function()

let instance1 = new subertype(

'yvette', 20)

; instance1.colors.push(

'yellow');

console.log(instance1.colors)

; //[

'pink', 'blue', 'green','yellow'

] instance1.sayname(

); //yvette

let instance2 = new subertype(

'jack', 22)

; console.log(instance2.colors)

; //[

'pink', 'blue', 'green'

] instance2.sayname(

);//jack

4,原型式繼承:

借助原型可以基於已有的物件建立新物件,同時還不必因此建立自定義型別。

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

function object(o)

f.prototype = o;

return new f();

}

在 object() 函式內部,先新增乙個臨時性的建構函式,然後將傳入的物件作為這個

建構函式的原型,最後返回了這個臨時型別的乙個新例項,從本質上講,object()

對傳入的物件執行了一次淺拷貝。

es5新增 object.create()方法規範了原型式繼承。

這個方法接收兩個引數:乙個用作新物件原型的物件和(可選的)

var person =

var person1 = object.create(person)

; person1.name =

'jack'

; person1.hobbies.push(

'coding');

var person2 = object.create(person)

; person2.name =

'echo'

; person2.hobbies.push(

'running');

console.log(person.hobbies)

;//[

'reading', 'photography','coding','running'

] console.log(person1.hobbies)

;//[

'reading', 'photography','coding','running'

] console.log(person2.hobbies)

;//[

'reading', 'photography','coding','running'

] // 在沒有必要建立建構函式,僅讓乙個物件與另乙個物件保持相似的情況下,原型式繼承是可以勝任的

5, 寄生式繼承是與原型式繼承緊密相關的一種思路。

寄生式繼承的思路與寄生建構函式和工廠模式類似,即建立乙個僅用於封裝繼承過程的函式,該函式在內部已某種方式來增強物件,最後再像真地是它做了所有工作一樣返回物件。

function createanother(original)

;return clone;//返回這個物件

} var person =

; var person2 = createanother(person)

; person2.sayhi(

); //hi

缺點:

使用寄生式繼承來為物件新增函式,會由於不能做到函式復用而效率低下。

同原型鏈實現繼承一樣,包含引用型別值的屬性會被所有例項共享。

6,寄生式組合繼承

所謂寄生組合式繼承,即通過借用建構函式來繼承屬性,通過原型鏈的混成形式來繼承方法,基本思路:

不必為了指定子型別的原型而呼叫超型別的建構函式,我們需要的僅是超型別原型的乙個副本,本質上就是使用寄生式繼承來繼承超型別的原型,然後再將結果指定給子型別的原型。寄生組合式繼承的基本模式如下所示:

function inheritprototype(subtype, supertype)

// 第一步:建立超型別原型的乙個副本

// 第二步:為建立的副本新增 constructor 屬性

// 第三步:將新建立的物件賦值給子型別的原型

// 至此,我們就可以通過呼叫 inheritprototype 來替換為子型別原型賦值的語句:

function supertype(name)

//...code

function subertype(name, age)

subertype.prototype = new supertype();

inheritprototype(subertype, supertype)

;...code

// 優點:

// 只呼叫了一次超類建構函式,效率更高。避免在subertype.prototype上面建立不必要的、

// 多餘的屬性,與其同時,原型鏈還能保持不變。

// 因此寄生組合繼承是引用型別最理性的繼承正規化。

es5實現繼承

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

ES5實現繼承

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

ES5如何實現繼承

原型鏈繼承的原理很簡單,直接讓子類的原型物件指向父類例項,當子類例項找不到對應的屬性和方法時,就會往它的原型物件,也就是父類例項上找,從而實現對父類的屬性和方法的繼承 function prant prant.prototype.getname function function child 子類 ...