[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)根據(jù)當(dāng)前文字選擇返回被選中的文字
這篇文章主要介紹JS如何實(shí)現(xiàn)根據(jù)當(dāng)前文字選擇返回被選中的文字,需要的朋友可以參考下2014-05-05
javascript setAttribute, getAttribute 在不同瀏覽器上的不同表現(xiàn)
該方法把指定的屬性設(shè)置為指定的值。如果不存在具有指定名稱的屬性,該方法將創(chuàng)建一個(gè)新屬性。2010-08-08
javascript 刪除dom對(duì)象的事件函數(shù)代碼
本文為《JavaScript高級(jí)程序設(shè)計(jì)》第9章中的跨平臺(tái)事件中的部分內(nèi)容。2010-04-04
bootstrap table 數(shù)據(jù)表格行內(nèi)修改的實(shí)現(xiàn)代碼
這篇文章主要介紹了bootstrap table 數(shù)據(jù)表格行內(nèi)修改的實(shí)現(xiàn)代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02
javascript 中設(shè)置window.location.href跳轉(zhuǎn)無(wú)效問(wèn)題解決辦法
這篇文章主要介紹了javascript 中設(shè)置window.location.href跳轉(zhuǎn)無(wú)效問(wèn)題解決辦法的相關(guān)資料,需要的朋友可以參考下2017-02-02
javascript中call,apply,bind的區(qū)別詳解
這篇文章主要介紹了javascript中call,apply,bind的區(qū)別詳解,幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下2020-12-12
webpack-dev-server 的 host 配置 0.0.0.0的方法
這篇文章主要介紹了webpack-dev-server 的 host 配置 0.0.0.0的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,,需要的朋友可以參考下2024-01-01

