js继承的实现代码


Posted in Javascript onAugust 05, 2010

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 直接操作本地文件的实现代码
Dec 01 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
js实现表格单列按字母排序
Aug 12 Javascript
一个报数游戏js版(约瑟夫环问题)
Aug 05 #Javascript
JS 实现完美include载入实现代码
Aug 05 #Javascript
使用ExtJS技术实现的拖动树结点
Aug 05 #Javascript
JavaScript 获取当前时间戳的代码
Aug 05 #Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 #Javascript
Js获取事件对象代码
Aug 05 #Javascript
zeroclipboard复制到剪切板的flash
Aug 04 #Javascript
You might like
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
javascript关于继承解析
2016/05/10 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
linux 下实现python多版本安装实践
2014/11/18 Python
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
Python实现调度算法代码详解
2017/12/01 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
python读取文件名并改名字的实例
2019/01/07 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
Python如何实现远程方法调用
2020/08/07 Python
python跨文件使用全局变量的实现
2020/11/17 Python
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
项目合作计划书
2014/01/09 职场文书
毕业生求职信
2014/06/10 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python