javascript 用原型繼承來實(shí)現(xiàn)對象系統(tǒng)
原型的含義:如果構(gòu)造器有一個(gè)原型對象 A,則由該構(gòu)造器創(chuàng)建的實(shí)例都必然復(fù)制自A
/*申明2個(gè)構(gòu)造器*/
var flower=function(){
this.name="nokia";
}
var flower2=function(){
this.age=22;
}
/*原型鏈*/
flower2.prototype=new flower();
/*根據(jù)剛才原型的定義,實(shí)例obj必然復(fù)制自new flower();*/
obj=new flowe2();
/*從父類繼承的屬性*/
alert(obj.name); //==>"nokia"
alert(obj.age); //==>22
一個(gè)構(gòu)造器產(chǎn)生的實(shí)例,其constructor屬性默認(rèn)總是指向該構(gòu)造器
alert(obj.constructor);//==>flower
構(gòu)造器原型的constructor屬性 指向構(gòu)造器本身
alert(flower.prototype.constructor==flower);//==>true
constructor會(huì)與原型繼承發(fā)生的沖突
function flower(){}
function flower2(){}
flower2.prototype=new flower();
var obj1=new flower();
var obj2=new flower2();
/*問題出現(xiàn)了,2個(gè)實(shí)例的constructor屬性都指向flower*/
alert(obj1.constructor==obj2.constructor);
/*obj1和obj2是不同的構(gòu)造器產(chǎn)生的實(shí)例,缺指向相同的構(gòu)造器,顯然出了問題*/
解決的方法
flower2.prototype=new flower();
/*重置原型后,修改原型的constructor屬性*/
flower2.prototype.constructor=flower2
或每次構(gòu)造實(shí)例時(shí)都重寫constructor屬性
function flower2(){
this.constructor=arguments.callee;
}
flower2.prototype=new flower();
此外原型繼承沒有提供調(diào)用父類的方法
然而我們基于原型繼承,通過靜態(tài)變量記錄父類來彌補(bǔ)這一缺陷
var Class={
create:function()
{
var _class=function()
{
this.init.apply(this,arguments);
}
_class.prototype.init=Function.prototype.init;
try{
return _class;
}finally{
_class=null;
}
}
};
//默認(rèn)構(gòu)造函數(shù)
Function.prototype.init=function(){}
//方法擴(kuò)展
Function.prototype.extend=function(list)
{
for(var i in list)this.prototype[i]=list[i];
return this;
}
//多級繼承
Function.prototype.inherits=function(parent)
{
//繼承的深度級別
var _depth=0;
//方法屬性移植
this.extend(new parent());
//初始化構(gòu)造函數(shù) 類的繼承通常不繼承構(gòu)造函數(shù)
this.prototype.init=Function.prototype.init;
//類的靜態(tài)父類
this.parent=parent;
//執(zhí)行父類函數(shù)
this.prototype.parent=function(name)
{
//若沒有參數(shù)則執(zhí)行構(gòu)造函數(shù)
if(!name)name='init';
//即將執(zhí)行的父類
var _parent=parent;
//若當(dāng)前已經(jīng)在父類中執(zhí)行則繼續(xù)向上尋找超類
if(_depth)
{
for(var i=0;i<_depth;i++)
{
_parent=_parent.parent;
}
}
//設(shè)置好級別
_depth++;
try{
//執(zhí)行函數(shù)并返回值
return _parent.prototype[name].apply(this,Array.prototype.slice.apply(arguments,[1]));
}catch(e){
throw(e);
}finally{
//恢復(fù)級別
_depth--;
}
}
return this;
}
例子:
//創(chuàng)建名為class1的構(gòu)造器
var class1=Class.create().extend({
b:function()
{
alert('clas');
alert(this.c);
},
c:100
});
//創(chuàng)建"對象"(構(gòu)造器)的實(shí)例
var s=new class1();
s.b();// ==>"clas",100
繼承父類,并調(diào)用父類的方法:
var test=Class.create().inherits(class1).extend({
b:function()
{
alert('test');
this.parent('b')
},
c:110
});
相關(guān)文章
JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕后變灰避免多次重復(fù)提交
注冊的時(shí)候需要發(fā)送驗(yàn)證激活帳號的郵件,為了避免郵件的多次重復(fù)發(fā)送,所以可以在點(diǎn)擊了發(fā)送后,設(shè)置按鈕變灰,倒計(jì)時(shí)一段時(shí)間后又可重復(fù)點(diǎn)擊,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈2013-07-07微信小程序 連續(xù)旋轉(zhuǎn)動(dòng)畫(this.animation.rotate)詳解
這篇文章主要介紹了微信小程序 連續(xù)旋轉(zhuǎn)動(dòng)畫(this.animation.rotate)詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04js之input[type=file]選擇重復(fù)的文件,無法觸發(fā)change事件問題
這篇文章主要介紹了js之input[type=file]選擇重復(fù)的文件,無法觸發(fā)change事件問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05JavaScript 錯(cuò)誤處理與調(diào)試經(jīng)驗(yàn)總結(jié)
在Web開發(fā)過程中,編寫JavaScript程序時(shí)或多或少會(huì)遇到各種各樣的錯(cuò)誤,有語法錯(cuò)誤,邏輯錯(cuò)誤。如果是一小段代碼,可以通過仔細(xì)檢查來排除錯(cuò)誤,但如果程序稍微復(fù)雜點(diǎn),調(diào)試JS便成為一個(gè)令Web開發(fā)者很頭痛的問題。2010-08-08ES6學(xué)習(xí)筆記之map、set與數(shù)組、對象的對比
這篇文章主要給大家介紹了關(guān)于ES6學(xué)習(xí)筆記之map、set與數(shù)組、對象對比的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-03-03JavaScript之創(chuàng)意時(shí)鐘項(xiàng)目(實(shí)例講解)
下面小編就為大家?guī)硪黄狫avaScript之創(chuàng)意時(shí)鐘項(xiàng)目。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10Bootstrap源碼解讀標(biāo)簽、徽章、縮略圖和警示框(8)
這篇文章主要源碼解讀了標(biāo)簽、徽章、縮略圖和警示框,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12js實(shí)現(xiàn)的簡單radio背景顏色選擇器代碼
這篇文章主要介紹了js實(shí)現(xiàn)的簡單radio背景顏色選擇器代碼,利用鼠標(biāo)事件及頁面元素動(dòng)態(tài)操作實(shí)現(xiàn)頁面背景顏色的改變功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08