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继承的实现
Author:尹伟铭 Blog:http://my.donews.com/yinwm/ 如我前面的文章说的,对于JavaScript,一个类,就是一个function,他的类方法(也就是static的)都是作为这个function的一部分,而实例方法,都是在prototype上面的. function ClassA() { } ClassA.staticMethod = function () { } ClassA.prototype.instanceMethod = function () {
-
ExtJS4中使用mixins实现多继承示例
在ExtJS4中使用mixins来实现多继承.具体例子代码如下: 复制代码 代码如下: (function(){ Ext.onReady(function(){ Ext.define('say',{ canSay:function(){ alert("hello"); } }); Ext.define('eat',{ caneat:function(){ alert("eating"); } }); Ext.define("user",{ mix
-
详解Javascript继承的实现
本文从以下四个方面展开话题: •1. 混合方式实现及问题 •2. 期望的调用方式 •3. 继承库的详细实现 •4. 总结 感兴趣的朋友可以继续往下阅读详情. 我最早掌握的在js中实现继承的方法是在xx学到的混合原型链和对象冒充的方法,在工作中,只要用到继承的时候,我都是用这个方法实现.它的实现简单,思路清晰:用对象冒充继承父类构造函数的属性,用原型链继承父类prototype 对象的方法,满足我遇到过的所有继承的场景.正因如此,我从没想过下次写继承的时候,我要换一种方式来写,直到今天晚上看了三生
-
js对象的构造和继承实现代码
复制代码 代码如下: <script> //定义js的user对象 function User(name,age){ this.name=name, this.age=age, this.getName=function(){ return this.name; }, this.getAge=function(){ return this.age; } } //实例化一个对象 var use=new User("aa",21); alert(use.name); alert
-
Javascript 继承机制的实现
选定基类后,就可以创建它的子类了.是否使用基类完全由你决定.有时,你可能想创建一个不能直接使用的基类,它只是用于给子类提供通用的函数.在这种情况下,基类被看作抽象类. 尽管ECMAScript并没有像其他语言那样严格地定义抽象类,但有时它的确会创建一些不允许使用的类.通常,我们称这种类为抽象类. 创建的子类将继承超类的所有属性和方法,包括构造函数及方法的实现.记住,所有属性和方法都是公用的,因此子类可直接访问这些方法.子类还可添加超类中没有的新属性和方法,也可以覆盖超类中的属性和方法. 4.2.
-
利用javascript中的call实现继承
昨天阿丹传了一个javascript中的重载例子给我,感觉不错.虽然到现在还是不太明白.怎么实现的.但还是贴出来. 实现setTimeout传object对象 看以下代码实现向里面的function 传参数 <script type="text/javascript"> var _st = window.setTimeout; window.setTimeout = function(fRef, mDelay) { if(typeof fRef == 'function'
-
Javascript 继承实现例子
1. 创建基类 首先考虑Polygon类.哪些属性和方法是必需的?首先,一定要知道多边形的边数,所以应该加入整数属性sides.还有什么是多边形必需的?也许你想知道多边形的面积,那么加入计算面积的方法getArea().图4-3展示了该类的UML表示. 图 4-3 在UML中,属性由属性名和类型表示,位于紧接类名之下的单元中.方法位于属性之下,说明方法名和返回值的类型. 在ECMAScript中,可以如下编写类: 注意,Polygon类不够详细精确,还不能使用,方法getArea()返回0,因为
-
实现JavaScript中继承的三种方式
一.原型链继承 在原型链继承方面,JavaScript与java.c#等语言类似,仅允许单父类继承.prototype继承的基本方式如下: 复制代码 代码如下: function Parent(){} function Child(){} Child.prototype = new Parent(); 通过对象Child的prototype属性指向父对象Parent的实例,使Child对象实例能通过原型链访问到父对象构造所定义的属性.方法等. 构造通过原型链链接了父级对象,是否就意味着完成了对象
-
深入理解JavaScript是如何实现继承的
最近最网上看了一个人面试淘宝时的经历,然后发现了自己有好多好多不太清楚的地方,所以特此写点文章来加深自己对一些问题的理解. 文章中提到了一个问题是:JavaScript是如何实现继承的? 下面我便阐述一些在网上找到的方法和实例来解释下,借以加深自己的印象. 我们知道JavaScript中的function是万能的,除了用于的函数定义,也可以用于类的定义. JavaScript的继承,说起来也是有点怪,不像C++和一些面向对象的语言,他没有public,private等访问控制修饰,也没有impl
-
javascript 面向对象,实现namespace,class,继承，重载
由于组里项目大多的javascript,css等客户端工作是另一同事在负责,该同事又特忙无法重构,老大也就只是提建议并未立即实施重构.但是我前些日子也改过些许客户端的小bug,确实那代码看得让人有些云里雾里,不知身在哪山,轻易不敢动代码,于是就自己动手鼓捣起我曾又爱又恨的javascript来,自己写一个简单的js实现namespace,继承,重载等面向对象的特性.欢迎拍砖灌水 .定义namespace Namesapce.js 复制代码 代码如下: Namespace = new Object
-
用JavaScript实现单继承和多继承的简单方法
JavaScript就其本质是函数式编程语言,是Lisp的后代,同时又加入了一下面向对象编程的元素,放弃了一些难懂的函数式语言的元素. 函数式编程语言可以实现面向对象编程,这是毫无疑义的,Curry方法可以实现对类和对象的模拟.但是JavaScript提供了另一种实现OOP的方法:原型继承. 因此,JavaScript实现面向对象编程和一般的函数式编程语言还是有所区别的. 本文我将会给大家介绍JavaScript实现单继承和多继承的方法. 用原型实现单继承: 有很多JavaScript库提供了一