js继承的实现代码

154 阅读 0 评论 102 点赞

我是靠谱客的博主清秀玫瑰，最近开发中收集的这篇文章主要介绍js继承的实现代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

base.js --继承的实现==========================
【注】：继承后，如果父类是一个类，则会继承其属性，方法（包括用prototype声明的），静态方法，否则只有属性和方法。

复制代码代码如下:

 
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); 
} 
} 

测试页：用法

复制代码代码如下:

 
<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+" 在行驶当中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+" 的关税2是："+ext; 
//} 
car2.protect = "【父类】2保护的"; 
car2.noExtra = function(){ 
return car.protect+" 不交关税2【父类】"; 
} 
var car = function(name,price){ 
this.name=name||"轿车 [父类]"; 
this.price=price||"几万[父类]"; 
this.start = function(){ 
alert(this.name+" 已启动！[父类]"); 
}; 
this.run = function(){ 
alert(this.name+" 在行驶当中。。。[父类]"); 
}; 
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+" 的关税是[父类]："+ext; 
} 
car.protect = "[父类]保护的"; 
car.noExtra = function(){ 
return car.protect+" 不交关税[父类]"; 
} 
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+" 走的有点慢。。。"); 
} 
} 
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> 