淺談JS繼承_寄生式繼承 & 寄生組合式繼承
5.寄生式繼承
與寄生構(gòu)造函數(shù)和工廠模式類似,創(chuàng)建一個(gè)僅用于封裝繼承過(guò)程的函數(shù),該函數(shù)在內(nèi)部以某種方式來(lái)增強(qiáng)對(duì)象,最后返回對(duì)象。
function createAnother(original){ var clone = Object.create(original); //通過(guò)調(diào)用函數(shù)創(chuàng)建一個(gè)新對(duì)象 clone.sayHi = function(){ //以某種方式來(lái)增強(qiáng)這個(gè)對(duì)象 alert("Hi"); }; return clone; //返回這個(gè)對(duì)象 } var person = { name: "Bob", friends: ["Shelby", "Court", "Van"] }; var anotherPerson = createAnother(person); anotherPerson.sayHi();
在上述例子中,createAnother函數(shù)接收了一個(gè)參數(shù),也就是將要作為新對(duì)象基礎(chǔ)的對(duì)象。
anotherPerson是基于person創(chuàng)建的一個(gè)新對(duì)象,新對(duì)象不僅具有person的所有屬性和方法,還有自己的sayHi()方法。
6.寄生組合式繼承
組合繼承是js最常用的繼承模式,組合繼承最大的問(wèn)題就是無(wú)論在什么情況下,都會(huì)調(diào)用兩次構(gòu)造函數(shù):一次是在創(chuàng)建子類型原型時(shí),另一次是在子類型構(gòu)造函數(shù)內(nèi)部。
function SuperType(name){ this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function(){ alert(this.name); } function SubType(name, age){ SuperType.call(this, name); //第二次調(diào)用SuperType() this.age = age; } SubType.prototype = new SuperType(); //第一次調(diào)用SuperType() SubType.prototype.sayAge = function(){ alert(this.age); }
在第一次調(diào)用SuperType構(gòu)造函數(shù)時(shí),SubType.prototype會(huì)得到兩個(gè)屬性: name和colors; 他們都是SuperType的實(shí)例屬性,只不過(guò)現(xiàn)在位于SubType的原型中。
當(dāng)調(diào)用SubType構(gòu)造函數(shù)時(shí),又會(huì)調(diào)用一次SuperType構(gòu)造函數(shù),這一次又在新對(duì)象上創(chuàng)建了實(shí)例屬性name和colors。
于是這兩個(gè)屬性就屏蔽了原型中的兩個(gè)同名屬性。
寄生組合式繼承就是為了解決這一問(wèn)題。
通過(guò)借用構(gòu)造函數(shù)來(lái)繼承屬性;
通過(guò)原型鏈來(lái)繼承方法。
不必為了指定子類型的原型而調(diào)用超類型的構(gòu)造函數(shù),
function inheritPrototype(subType, superType){ var protoType = Object.create(superType.prototype); //創(chuàng)建對(duì)象 protoType.constructor = subType; //增強(qiáng)對(duì)象 subType.prototype = protoType; //指定對(duì)象 } function SuperType(name){ this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function(){ alert(this.name); } function SubType(name, age){ SuperType.call(this, name); //第二次調(diào)用SuperType() this.age = age; } inheritPrototype(SubType, SuperType) SubType.prototype.sayAge = function(){ alert(this.age); } var instance = new SubType("Bob", 18); instance.sayName(); instance.sayAge();
inheritPrototype函數(shù)接收兩個(gè)參數(shù):子類型構(gòu)造函數(shù)和超類型構(gòu)造函數(shù)。
1. 創(chuàng)建超類型原型的副本。
2. 為創(chuàng)建的副本添加constructor屬性,彌補(bǔ)因重寫原型而失去的默認(rèn)的constructor屬性
3. 將新創(chuàng)建的對(duì)象(即副本)賦值給子類型的原型這種方法只調(diào)用了一次SuperType構(gòu)造函數(shù),instanceof 和isPrototypeOf()也能正常使用。
以上這篇淺談JS繼承_寄生式繼承 & 寄生組合式繼承就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- JavaScript繼承基礎(chǔ)講解(原型鏈、借用構(gòu)造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承)
- JS 面向?qū)ο笾^承---多種組合繼承詳解
- javascript中最常用的繼承模式 組合繼承
- JavaScript寄生組合式繼承實(shí)例詳解
- js常用的繼承--組合式繼承
- JavaScript寄生組合式繼承原理與用法分析
- 淺談JS繼承_借用構(gòu)造函數(shù) & 組合式繼承
- [js高手之路]寄生組合式繼承的優(yōu)勢(shì)詳解
- JS繼承之借用構(gòu)造函數(shù)繼承和組合繼承
- 簡(jiǎn)單談?wù)凧avaScript寄生式組合繼承
相關(guān)文章
JavaScript在web自動(dòng)化測(cè)試中的作用示例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript在web自動(dòng)化測(cè)試中的作用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08bootstrap實(shí)現(xiàn)的自適應(yīng)頁(yè)面簡(jiǎn)單應(yīng)用示例
這篇文章主要介紹了bootstrap實(shí)現(xiàn)的自適應(yīng)頁(yè)面簡(jiǎn)單應(yīng)用,結(jié)合具體實(shí)例形式分析了基于bootstrap的列表布局結(jié)構(gòu)頁(yè)面實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2017-03-03淺談JavaScript構(gòu)造樹形結(jié)構(gòu)的一種高效算法
這篇文章主要介紹了JavaScript構(gòu)造樹形結(jié)構(gòu)的一種高效算法,對(duì)算法感興趣的同學(xué),可以參考下2021-05-05javascript數(shù)字?jǐn)?shù)組去重復(fù)項(xiàng)的實(shí)現(xiàn)代碼
console.log 不支持ie,下面的代碼需要在火狐中測(cè)試,不然會(huì)有問(wèn)題。2010-12-12javascript實(shí)現(xiàn)tab響應(yīng)式切換特效
這篇文章主要為大家介紹了javascript實(shí)現(xiàn)tab響應(yīng)式切換特效,以一個(gè)完整的實(shí)例對(duì)tab響應(yīng)式切換特效進(jìn)行詳細(xì)的分析,感興趣的小伙伴們可以參考一下2016-01-01CSS(js)限制頁(yè)面顯示的文本字符長(zhǎng)度
限制頁(yè)面顯示的字符長(zhǎng)度,一直被眾多網(wǎng)友傾睬,本人也是一fans利用閑暇時(shí)間搜集整理了一些實(shí)用技巧,需要了解的朋友可以參考下2012-12-12javascript實(shí)現(xiàn)手動(dòng)點(diǎn)贊效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)手動(dòng)點(diǎn)贊效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-04-04