javascript继承

一、javascript中对象之间继承方式的实现

继承的方式：

1、对象冒充

构造函数使用this关键字给所有属性和方法赋值，因为构造函数只是一个函数，所以可使ClassA的构造函数成为ClassB的构造函数

function ClassA(sColor){
this.color=sColor;
this.sayColor=function(){
console.log(this.color);
}
}
function ClassB(sColor){
this.newMethpd=ClassA;
this.newMethpd(sColor);
delete this.newMethpd;

}
window.onload =function(){
var a=new ClassA("saa");
var b=new ClassB("saasss");
a.sayColor();
b.sayColor();
};

使用这种方式可以实现多继承

2、call方法

call()方法与经典的对象冒充方式最相似，它的第一个参数是this的对象，其他参数是直接传递给函数自身

function SayColor(aa,bb){
console.log(aa+this.color+bb);
}
window.onload =function(){
var oo=new Object();
oo.color="red";
SayColor.call(oo,"the color is     ","   a very nice   ");   //the color is     red   a very nice
};

当B是向继承自A时

function ClassA(sColor){
this.color=sColor;
this.sayColor=function(){
console.log(this.color);
}
}
function ClassB(sColor,Sname){
ClassA.call(this,sColor);
this.name=Sname;
this.sayName=function(){
console.log(this.name);
}
}
window.onload =function(){
var xx=new ClassB("aa","vv");
xx.sayName();
xx.sayColor();
};

3、apply()方法

apply方法有两个参数，用作this的对象和要传递给函数的参数数组

function SayColor(aa,bb){
console.log(aa+this.color+bb);
}
window.onload =function(){
var oo=new Object();
oo.color="red";
SayColor.apply(oo,new Array("  haha  ","  saa    "));   //  haha  red  saa
};

使用这种方式使B来继承A

function ClassA(sColor){
this.color=sColor;
this.sayColor=function(){
console.log(this.color);
}
}
function ClassB(sColor,Sname){
ClassA.apply(this,arguments);
this.name=Sname;
this.sayName=function(){
console.log(this.name);
}
}
window.onload =function(){
var xx=new ClassB("aa","vv");
xx.sayName();
xx.sayColor();
};

4、混合方式

因为创建类的最好的方式就是构造函数来存放属性，原型来定义方法

function ClassA(Scolor){
this.color=Scolor;
}
ClassA.prototype.sayColor=function(){
console.log(this.color);
};
function ClassB(Scolor,Sname){
ClassA.apply(this,arguments);
this.name=Sname;
}
//这是继承A的方法
ClassB.prototype=new ClassA();
//这是继承B的属性
ClassB.prototype.sayname=function(){
console.log(this.name);
}

window.onload =function(){
var aa=new ClassA("reed");
var bb=new ClassB("aaa","asas");
bb.sayColor();
};

用继承的方式来描述各种几何图形

//这里先定义基类，来最抽象的描述多边形
function Polygon(iSides){
this.sides=iSides;
}
Polygon.prototype.getArea=function(){
return 0;
}
//定义三角形的属性
function Triangle(iBase,iHeight){
Polygon.call(this,3);
this.base=iBase;
this.height=iHeight;
}
//三角形继承来自基类的方法
Triangle.prototype=new Polygon();
Triangle.prototype.getArea=function(){
return   0.5*this.base*this.height;
}
//定义矩形的属性
function Rectangle(iwidth,ilength){
Polygon.call(this,4);
this.width=iwidth;
this.length=ilength;
}
//矩形继承来自基类的方法
Rectangle.prototype=new Polygon();
Rectangle.prototype.getArea=function(){
return this.width*this.length;
}

window.onload =function(){
var tt=new Triangle(3,4);
var rr=new Rectangle(6,8);
console.log(tt.getArea());
console.log(rr.getArea());
};

4.3其他继承方式

1、使用zinherit

<script src="js/zinherit.js"></script>
<script>
//定义基类的属性
function Polygon(iSides){
this.sides=iSides;
}
//定义基类的方法
Polygon.prototype.getArea=function(){
return 0;
}
//定义三角形类的属性
function Triangle(iBase,iHeught){
Polygon.call(this,3);
this.base=iBase;
this.height=iHeught;
}
//定义三角形的方法使用的是inherit的方法
Triangle.prototype.inheritFrom(Polygon);
Triangle.prototype.getArea= function () {
return this.base*0.5*this.height;
}
//定义矩形的属性
function Rectangle(iheight,iwidth){
Polygon.call(this,4);
this.height=iheight;
this.width=iwidth;
}
//定义矩形的方法
Rectangle.prototype.inheritFrom(Polygon);
Rectangle.prototype.getArea=function(){
return this.width*this.height;
}
window.onload =function(){
var tt=new Triangle(3,4);
var rr=new Rectangle(6,8);
console.log(tt.getArea());
console.log(rr.getArea());
console.log(tt.instanceOf(Polygon));    //true
console.log(rr.instanceOf(Polygon));  //true
console.log(rr.instanceOf(tt));   //false
};

2、zinherit支持多重继承，原型链不支持多重继承。同样，使这种多继承成为可能的关键是inheritForm方法不替换Prototype()

<script src="js/zinherit.js"></script>
<script>
function ClassX(){
this.message="this is X Message";
if(typeof ClassX._inher=="undefined"){
ClassX.prototype.sayX=function(){
console.log(this.message);
}
ClassX._inher=true;
}
}
function ClassY(){
this.message="this is Y Message";
if(typeof ClassY._inher=="undefined"){
ClassY.prototype.sayY=function(){
console.log(this.message);
}
ClassY._inher=true;
}
}
function ClassZ(){
this.message="this is Z Message";
ClassX.apply(this);
ClassY.apply(this);
ClassZ.prototype.inheritFrom(ClassX);
ClassZ.prototype.inheritFrom(ClassY);
if(typeof ClassZ._inher=="undefined"){
ClassZ.prototype.sayZ=function(){
console.log(this.message);
}
ClassZ._inher=true;
}
}
window.onload =function(){
var rr=new ClassZ();
rr.sayZ();
rr.sayX();
rr.sayY();
};