[js高手之路]寄生組合式繼承的優(yōu)勢(shì)詳解
在之前javascript面向?qū)ο笙盗械奈恼吕锩妫覀円呀?jīng)探討了組合繼承和寄生繼承,回顧下組合繼承:
function Person( uName ){ this.skills = [ 'php', 'javascript' ]; this.userName = uName; } Person.prototype.showUserName = function(){ return this.userName; } function Teacher ( uName ){ Person.call( this, uName ); } Teacher.prototype = new Person(); var oT1 = new Teacher( 'ghostwu' ); oT1.skills.push( 'linux' ); var oT2 = new Teacher( 'ghostwu' ); console.log( oT2.skills ); //php,javascript console.log( oT2.showUserName() ); //ghostwu
組合繼承有個(gè)缺點(diǎn),父類的構(gòu)造函數(shù)會(huì)被調(diào)用兩次.
第11行,設(shè)置子類原型對(duì)象(prototype),調(diào)用了第一次
第9行,實(shí)例化對(duì)象的時(shí)候,又調(diào)用一次
構(gòu)造函數(shù)的目的是為了復(fù)制屬性,第9行肯定是不能少的,第11行的目的是為了獲取到父類原型對(duì)象(prototype)上的方法,基于這個(gè)目的,有沒(méi)有別的方法
可以做到 在不需要實(shí)例化父類構(gòu)造函數(shù)的情況下,也能得到父類原型對(duì)象上的方法呢? 當(dāng)然可以,我們可以采用寄生式繼承來(lái)得到父類原型對(duì)象上的方法
function Person( uName ){ this.skills = [ 'php', 'javascript' ]; this.userName = uName; } Person.prototype.showUserName = function(){ return this.userName; } function Teacher ( uName ){ Person.call( this, uName ); } function object( o ){ var G = function(){}; G.prototype = o; return new G(); } function inheritPrototype( subObj, superObj ){ var proObj = object( superObj.prototype ); //復(fù)制父類superObj的原型對(duì)象 proObj.constructor = subObj; //constructor指向子類構(gòu)造函數(shù) subObj.prototype = proObj; //再把這個(gè)對(duì)象給子類的原型對(duì)象 } inheritPrototype( Teacher, Person ); var oT1 = new Teacher( 'ghostwu' ); oT1.skills.push( 'linux' ); var oT2 = new Teacher( 'ghostwu' ); console.log( oT2.skills ); //php,javascript console.log( oT2.showUserName() ); //ghostwu
其實(shí),說(shuō)白了寄生組合式繼承就是一個(gè)借用構(gòu)造函數(shù) + 相當(dāng)于淺拷貝父類的原型對(duì)象
以上這篇[js高手之路]寄生組合式繼承的優(yōu)勢(shì)詳解就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)canvas圖片與img圖片的相互轉(zhuǎn)換的示例
本篇文章主要介紹了js實(shí)現(xiàn)canvas圖片與img圖片的相互轉(zhuǎn)換的示例,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08純JavaScript實(shí)現(xiàn)獲取onclick、onchange等事件的值
這篇文章主要介紹了JavaScript獲取onclick、onchange等事件的值的方法,需要的朋友可以參考下2014-12-12javascript針對(duì)不確定函數(shù)的執(zhí)行方法
這篇文章主要介紹了javascript針對(duì)不確定函數(shù)的執(zhí)行方法,實(shí)例分析了eval函數(shù)及符號(hào)屬性兩種執(zhí)行方式,需要的朋友可以參考下2015-12-12JS實(shí)現(xiàn)頁(yè)面數(shù)據(jù)懶加載
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)頁(yè)面數(shù)據(jù)懶加載,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02JS實(shí)現(xiàn)頭像循環(huán)滾動(dòng)示例
這篇文章主要為大家介紹了JS實(shí)現(xiàn)頭像循環(huán)滾動(dòng)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11javascript來(lái)定義類的規(guī)范小結(jié)
javascript來(lái)定義類的規(guī)范,有利于代碼的可閱讀性。2010-11-11JavaScript更改原始對(duì)象valueOf的方法
這篇文章主要介紹了JavaScript更改原始對(duì)象valueOf的方法,涉及javascript使用自定義valueOf函數(shù)替換掉原始o(jì)bject中valueOf的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03