js继承实例与继承方法应用(1/2)

javascript有所帮助。

 

<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>

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

javascript本身是从perl语言的语法演变而来的,本质上是脚本语言,随着版本的更新逐渐加入的对面向对象的模拟。我认为js的面向对象模拟总体上做得还是不错的,因为我们不能盲从任何一种理念,不能纯粹的为了oop而oop,我们需要抓住的是面向对象的好处到底是什么?为了这些优点去oop,才是最明智的选择,所以说js做得还不错。

js的继承在很多书里面细致的分了很多种类型和实现方式,大体上就是两种:对象冒充、原型方式。这两种方式各有优点和缺陷,这里我先列举出来,再从底层分析区别:

(一)对象冒充

jscript code

function a(name){
    this.name = name;
    this.sayhello = function(){alert(this.name+” say hello!”);};
}

function b(name,id){
    this.temp = a;
    this.temp(name);        //相当于new a();
    delete this.temp;        //防止在以后通过temp引用覆盖超类a的属性和方法
     this.id = id;   
    this.checkid = function(id){alert(this.id==id)};
}

 

 

首页 1 2 末页

时间: 2024-07-31 09:12:01

js继承实例与继承方法应用(1/2)的相关文章

js getElementsByTagName实例与简写方法

function tag(name,elem){ if(!document.getelementsbytagname) return false; return (elem || document).getelementsbytagname(name); }   document.getelementsbyclassname = function(classname,obox) { //适用于获取某个html区块内部含有某一特定classname的所有html元素 this.d= obox ||

js原型继承的两种方法对比介绍

这篇文章主要介绍了js原型继承的两种方法对比介绍,需要的朋友可以参考下 在实际的项目中,我们通常都是用构造函数来创建一个对象,再将一些常用的方法添加到其原型对象上.最后要么直接实例化该对象,要么将它作为父类,再申明一个对象,继承该父类.   而在继承的时候有两种常用方式,今天我们就来稍作探讨    代码如下: //父类  function Person(name){     this.name = name; };    // 子类  function Student(sex){   Perso

js类式继承的具体实现方法_基础知识

在开始摆弄代码之前,应该搞清楚使用继承的目的和能带来什么好处.一般来说,在设计类的时候,我们希望能减少重复性的代码,并且尽量弱化类之间的耦合.而要做到这两者都兼顾是很难的,我们需要根据具体的条件和环境下决定我们应该采取什么方法.根据我们对面向对象语言中继承的了解,继承会带类直接的强耦合,但js由于其特有的灵活性,可以设计出强耦合和弱耦合,高效率和低效率的代码.而具体用什么,看情况. 下面提供js实现继承的三种方法:类式继承,原型继承,掺元类.这里先简述类式继承,后两种在往后的随便中简述,请多多关

js原型继承的两种方法对比介绍_基础知识

在实际的项目中,我们通常都是用构造函数来创建一个对象,再将一些常用的方法添加到其原型对象上.最后要么直接实例化该对象,要么将它作为父类,再申明一个对象,继承该父类. 而在继承的时候有两种常用方式,今天我们就来稍作探讨 复制代码 代码如下: //父类 function Person(name){    this.name = name;};  // 子类 function Student(sex){  Person.apply(this,arguments); //继承父类的构造函数  this.

浅谈js原型链与继承

js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解.       首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通 过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在.然后我们定义一个函数 foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例

js入门实例の构造函数\方法的定义和调用\原型对象

js|对象|函数 <script language="javascript">function circel(radius){//这个函数定义了类自身,下面r是构造函数定义并并初始化的一个实例变量    this.r=radius;}//该属性是类变量,他属于构造函数的一个属性circel.PI=3.14159;function area() {//这个当然是计算圆面积的公式了    return this.PI * this.r * this.r;}//下面我们通过把函数

JS 操作Array数组的方法及属性实例

 本篇文章主要是对JS操作Array数组的方法及属性进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 本文总结了Array数组的3个属性,length 属性.prototype 属性.constructor 属性使用,并附注数组对象的8个分类及多个方法使用,具体如下:   对象的3个属性 1.length 属性   length 属性 Length属性表示数组的长度,即其中元素的个数.因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1.和其他大多数不同的是

js原型链与继承解析(初体验)_javascript技巧

首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在.然后我们定义一个函数foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例化的对象可以共享其属性(下面的两个例子会详细介绍). function foo(){} fo

浅谈JS继承_寄生式继承 &amp; 寄生组合式继承_javascript技巧

5.寄生式继承 与寄生构造函数和工厂模式类似,创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后返回对象. function createAnother(original){ var clone = Object.create(original); //通过调用函数创建一个新对象 clone.sayHi = function(){ //以某种方式来增强这个对象 alert("Hi"); }; return clone; //返回这个对象 } var person