js继承的实现代码_javascript技巧

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:没有注意到性能问题,往大家改善
想只用一个参数,不知道大家有没有办法?
嵌套类 没试过。

时间: 2024-10-15 17:57:02

js继承的实现代码_javascript技巧的相关文章

JS继承用法实例分析_javascript技巧

本文实例分析了JS继承的用法.分享给大家供大家参考.具体分析如下: 继承 : 子类不影响父类,子类可以继承父类的一些功能 ( 代码复用 ) 属性的继承 : 调用父类的构造函数 call 方法的继承 : for in :  拷贝继承 (jquery也是采用拷贝继承extend) 1. 拷贝继承 function Person (name){ this.name = name; } Person.prototype.showName =function (){ alert(this.name); }

js简单倒计时实现代码_javascript技巧

本文实例讲述了js简单倒计时实现代码.分享给大家供大家参考,具体如下: <div class="time"> 距离活动结束还有<span id="day"></span>天 <span id="hours"></span>小时 <span id="min"></span>分 <span id="sec"><

js实现微信分享代码_javascript技巧

通常自己做的一个页面想通过微信像朋友分享时,展示的标题和描述都是不是自己想要的,自己查了一些资料,原来是通过js来进行控制 展示效果如下: 标题.描述.还有分享的图片都是有js来控制的. js代码如下 <script> var dataForWeixin = { appId: "", MsgImg: "Christmas/201012189457639.gif",//显示图片 TLImg: "Christmas/201012189457639.

简单的JS轮播图代码_javascript技巧

在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

浅谈时钟的生成(js手写简洁代码)_javascript技巧

在生成时钟的过程中自己想到布置表盘的写法由这么几种: 当然利用那种模式都可以实现,所以我们要用一个最好理解,代码有相对简便的方法实现 1.利用三角函数 用js在三角函数布置表盘的过程中有遇见到这种情况:是在表盘的刻度处,利用三角函数计算具体的值时不能得到整数,需要向上或者向下取整,这样无形中就会存在些许偏差,而且这样的偏差难利用样式来调整到位,即使最终效果都可以实现,但是细微处的缝隙和角度的偏差都会影响整体的视觉体验,作为一名程序开发人员,这样的视觉体验很难让别人认可,放弃. 2.利用遮罩层 j

纯JS前端实现分页代码_javascript技巧

先给大家展示下效果图,如果大家感觉效果不错,请参考实现代码: 因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页去处理的,我就是用这块代码写了两个稍微不同一些的分页!公共的代码抽取的也差不多,主要就是ajax后台以及返回的值不同而已,只要把总页码的值获取到,点击首页/下一页等传值正确的话,基本上分页是不会出什么问题的  网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所

js漂浮广告实现代码_javascript技巧

本文实例讲述了js实现漂浮广告的方法.分享给大家供大家参考.具体如下: 具体代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script typ

纯js实现手风琴效果代码_javascript技巧

我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢? 但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型项目中就会显现出来,下面我用原生js实现一个简单的手风琴效果效果.  HTML代码如下  结构非常简单就5个li盒子,js代码会渲染图片上去 <!DOCTYPE html> <html> <head lang="en"> <meta charset

js 文件引入实现代码_javascript技巧

也不好麻烦让他们从新写一个方法,由于他们都引用了这个AA.js文件,想在这边在AA.js后执行一个函数自动把jq库引入,于是想到引入js文件方法: 复制代码 代码如下: getScript : function(s,call){ var el = UI.DC('script');         if (call) {             el.onload =el.onreadystatechange=call;         }         UI.A(el,'type','text