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