JS實現繼承的多種方式(一)

2021-09-02 23:12:00 字數 2950 閱讀 3955

注:部分名詞和示例**摘自高程及犀牛書,即站在巨人的肩膀上?

將父類的屬性及原型方法初始化給例項原型,即讓乙個引用型別值繼承另乙個引用型別的屬性和方法

function supertype() 

supertype.prototype.getsupervalue = function ()

function subtype()

subtype.prototype = new supertype()

// 重寫父類的方法,在原型鏈賦值後

// subtype.prototype.getsupervalue = function ()

subtype.prototype.getsubvalue = function ()

var instance = new subtype()

instance.getsubvalue() // -> false true

重寫原型物件,代之以新型別的例項,相關資訊如下

// 輸出當前例項的詳細資訊

console.dir(instance)

// 確定當前原型和例項的從屬關係

缺陷:未對父類的值進行解引, 即原型屬性被例項屬性共享, 構造器從屬關係不明確  

測試**

function supertype() 

function subtype() {}

subtype.prototype = new supertype()

subtype.prototype.constructor = subtype // 指定當前例項的建構函式

var instance = new subtype()

instance.colors.push("black")

var instance2 = new subtype()

console.log(instance.colors) // -> ["red","yellow","blue","black"]

console.log(instance2.colors) // -> ["red","yellow","blue","black"]

在子類建構函式中調父類建構函式

function supertype() 

}function subtype()

var instance = new subtype()

instance.colors.push("black")

// 重寫父類的方法

// instance.getlast = function ()

var instance2 = new subtype()

console.dir(instance)

console.log(instance.getlast()) // -> black

console.log(instance2.getlast()) // -> blue

在subtype物件上執行借調(個人理解)supertype中的物件初始化**,近似於乙個共用的函式巧妙的利用了this的動態性

優點:取消了例項屬性共享(通過創造副本),優化構成器從屬關係

缺陷:無法抽離出共用的一些方法(**復用),需為每個例項重賦值一次

即使用原型鏈實現對原型方法的繼承,借用建構函式實現對例項屬性的繼承

function supertype(name) 

supertype.prototype.getsupervalue = function ()

function subtype(name)

//繼承方法

subtype.prototype = new supertype()

subtype.prototype.constructor = subtype // 指定當前例項的建構函式

subtype.prototype.getsubvalue = function()

var instance = new subtype("yun")

var instance2 = new subtype("touda")

instance.colors.push("black")

console.dir(instance)

instance.getsupervalue() // -> yun

instance.getsubvalue() // -> true

console.log(instance.colors) // -> ["red","yellow","blue","black"]

console.log(instance2.colors) // -> ["red","yellow","blue"]

分別繼承,對於父類的屬性用經典模式,方法則採用原型鏈模式 ,並完善構造器從屬關係

優點:融合了經典模式和原型鏈模式,形成互補

前端JS實現繼承的多種方式

定義乙個父類 function father name this.color red blue 原型方法 father.prototype.age 18 father.prototype.sayage function 1.原型鏈繼承 將父類的例項作為子類的原型 function son name ...

JS中的多種繼承方式

第一種 原型繼承 子類的原型等於父類的例項 function parent parent.prototype.getx function function child child.prototype newparent child.prototype.gety function let c1 new...

繼承的多種方式

常用的繼承方法 1.原生繼承 抽取共同點 人類 function people name,age,people.prototype.say function people.prototype.breath function 學生類 function student name,age,studentn...