js继承的实现代码_Javascript教程-查字典教程网
js继承的实现代码
js继承的实现代码
发布时间:2016-12-30 来源:查字典编辑
摘要:base.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>

ps:没有注意到性能问题,往大家改善

想只用一个参数,不知道大家有没有办法?

嵌套类 没试过。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类