快捷導(dǎo)航

js繼承的實現(xiàn)代碼

更新時間：2010年08月05日 13:53:23 作者：

學(xué)著js的繼承，自己也寫了個。感覺不是很好?，F(xiàn)在很多代碼都封裝成類。

base.js --繼承的實現(xiàn)==========================
【注】：繼承后，如果父類是一個類，則會繼承其屬性，方法（包括用prototype聲明的），靜態(tài)方法，否則只有屬性和方法。

 
Object.prototype.extendf= function (a,b){ 
if(!a||!b) return; 
var fa = typeof a=="function"; 
var fb = typeof b=="function"; 
var cha = function(a,b){ 
for(var c in b){ 
if(a[c]==undefined)//子類重寫 
a[c]=b[c]; 
} 
return a;//返回繼承后的對象 
} 
if(fa&&fb){ 
b.apply(this,a.arguments); 
cha(a,b); 
this["base"] =new b;//通過base訪問父類 
return cha(this,b.prototype); 
} 
else if(!fa&&fb){ 
cha(a,new b); 
a["base"]= new b; 
return cha(a,b); 
}else if(fa&&!fb){ 
cha(a,b); 
this["base"]=b; 
return cha(this,b); 
}else if(!fa&&!fb){ 
a["base"]=b; 
return cha(a,b); 
} 
} 

測試頁：用法

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<script type="text/javascript" src="base.js"></script> 
<script type="text/javascript"> 
var car2 = { 
name:"轎車【父類】", 
price:"幾萬【父類】", 
start : function(){ 
alert(this.name+" 已啟動2！【父類】"); 
}, 
run : function(){ 
alert(this.name+" 在行駛當(dāng)中2。。。【父類】"); 
}, 
stop: function(){ 
alert(this.name+" 已停止2！【父類】"); 
}, 
remark: function(){return "【父類】2我是一輛 "+this.name+"；價值 "+this.price;} 
// this.remark = "我是一輛 "+this.name+"；價值 "+this.price; 
} 
//car2.prototype.extra = function(ext){ 
// return this.name+" 的關(guān)稅2是："+ext; 
//} 
car2.protect = "【父類】2保護(hù)的"; 
car2.noExtra = function(){ 
return car.protect+" 不交關(guān)稅2【父類】"; 
} 
var car = function(name,price){ 
this.name=name||"轎車 [父類]"; 
this.price=price||"幾萬[父類]"; 
this.start = function(){ 
alert(this.name+" 已啟動！[父類]"); 
}; 
this.run = function(){ 
alert(this.name+" 在行駛當(dāng)中。。。[父類]"); 
}; 
this.stop= function(){ 
alert(this.name+" 已停止！[父類]"); 
}; 
this.remark = function(){return "[父類]我是一輛 "+this.name+"；價值 "+this.price;}; 
// this.remark = "我是一輛 "+this.name+"；價值 "+this.price; //注意，這樣做 name 和price 將得不到傳參，故注釋 
} 
car.prototype.extra = function(ext){ 
return this.name+" 的關(guān)稅是[父類]："+ext; 
} 
car.protect = "[父類]保護(hù)的"; 
car.noExtra = function(){ 
return car.protect+" 不交關(guān)稅[父類]"; 
} 
var BMW = function(){ 
this.extendf(BMW,car); 
this.name = "BMW【子類】"; 
this.start=function(){ 
alert(this.name+"專屬 啟動裝置！"); 
}; 
return ("this.name1="+this.name); 
} 
var BMW2 = function(){ 
this.extendf(BMW2,car2); 
this.name = "寶馬終極2號【子類】"; 
this.start=function(){ 
alert(this.name+" 專屬 啟動裝置2號未來！"); 
}; 
return ("this.name1="+this.name); 
} 
var bensi = { 
name:"bensi", 
price:"130萬", 
start:function(){ 
alert(this.name+" 華麗啟動！"); 
}, 
stop:function(){ 
alert(this.name+" 專用剎車停止！"); 
} 
} 
bensi.noExtra=function(){ 
return "誰敢收稅？"; 
} 
var autuo = { 
name:"autuo【子類】", 
price:"1萬", 
stop:function(){ 
alert(this.name+" 奧拓失靈了！"); 
} 
} 
function ChangAn(){ 
this.extendf(ChangAn,car); 
// this.name = "CHANGAN【子類】"; 
this.run=function(){ 
alert(this.name+" 走的有點(diǎn)慢。。。"); 
} 
} 
var ftest = function(){ 
var tb = new BMW("寶馬","70萬"); 
testRun(tb); 
alert(BMW.noExtra()); 
} 
var ftest2 = function(){ 
var tb = bensi//("奔馳","120萬"); 
tb.extendf(bensi,car); 
testRun(bensi); 
alert(bensi.noExtra()); 
} 
var ftest3 = function(){ 
var tb = new ChangAn("長安[傳參]","5萬"); 
testRun(tb); 
alert(ChangAn.noExtra()); 
} 
var ftest4 = function(){ 
var tb = autuo 
tb.extendf(autuo,car2); 
testRun(tb); 
alert(autuo.noExtra()); 
} 
var ftest5 = function(){ 
var tb = autuo 
tb.extendf(autuo,bensi); 
alert(tb.name); 
tb.start(); 
tb.stop(); 
alert(autuo.noExtra()); 
} 
var ftest6 = function(){ 
var tb = new BMW2("寶馬2號","65萬"); 
var scar = document.getElementById("showcar"); 
scar.innerHTML = tb.remark(); 
alert(tb.name); 
tb.start(); 
tb.stop(); 
alert(BMW2.noExtra()); 
} 
//測試輸出 
function testRun(tb){ 
var scar = document.getElementById("showcar"); 
if(!scar) return false; 
scar.innerHTML = tb.remark(); 
tb.base.start(); 
tb.start(); 
tb.base.run(); 
tb.run(); 
tb.base.stop(); 
tb.stop(); 
alert(tb.extra("1萬"));//父類為Object時這個會出錯，因為父類本身就沒有 
} 
</script> 
</head> 
<body> 
js測試： 
<input type = "button" value = "寶馬" onclick = "ftest()" > 
<input type = "button" value = "奔馳" onclick = "ftest2()" > 
<input type = "button" value = "長安" onclick = "ftest3()" > 
<input type = "button" value = "奧拓" onclick = "ftest4()" > 
<input type = "button" value = "奔馳類的奧拓" onclick = "ftest5()" > 
<input type = "button" value = "寶馬2號" onclick = "ftest6()" > 
<div id = "showcar"></div> 
</body> 
</html> 