JS继承一

1、构造函数方式写类，通过方法调用复制父类属性/字段到子类 实现继承

这里父类，子类都采用构造函数方式写，不用原型。子类调用父类函数来复制父类的属性。

/**
 * 父类Polygon:多边形
 * @param {Object} sides
 */
function  Polygon(sides) {
    this .sides = sides;
    this .setSides = function (s) { this .sides=s;}
}

/**
 * 子类Triangle:三角形
 */
function  Triangle() {
    this .tempfun = Polygon; //父类引用赋值给子类的一个属性tempfun
    this .tempfun(3); //调用
    delete  this .tempfun; //删除该属性
    this .getArea = function (){};
}

//new个对象
var  tri = new  Triangle();
console.log(tri.sides); //继承的属性
console.log(tri.setSides); //继承的方法
console.log(tri.getArea); //自有的方法

//缺点是对于Triangle的实例对象用instanceof为父类Polygon时是false
console.log(tri instanceof  Triangle); //true
console.log(tri instanceof  Polygon); //false

因为 JavaScript中具名函数的多种调用方式 ，子类还可以有以下的多种实现方式。只是在子类中调用父类方法不同而已。

function  Triangle() {
    Polygon.call( this ,3); //call方式调用父类
    this .getArea = function (){};
}
function  Triangle() {
    Polygon.apply( this ,[3]); //apply方式调用父类
    this .getArea = function (){};
}
function  Triangle() {
    var  temp = new  Polygon(3); //new方式调用父类
    for (atr in  temp) { //全部复制给子类
        this [atr] = temp[atr];
    }
    this .getArea = function (){};
}

这种方式的缺点是子类的实例对象用instanceof检查父类时总是false。这与java中继承"is a "的关系是违背的。

 

2、原型方式写类，原型方式继承

core JS自身的对象系统就是采用原型方式(prototype based)继承的。或者说core JS没有采用常见的类继承(class based)系统，而是使用原型继承来实现自己的对象系统。工作中我们也可以用原型方式来实现继承，代码复用以构建自己的功能模块。 

/**
 * 父类Polygon:多边形
 *
 */
function  Polygon() {}
Polygon.prototype.sides = 0;
Polygon.prototype.setSides = function (s) { this .sides=s;}

/**
 * 子类Triangle:三角形
 */
function  Triangle() {}
Triangle.prototype = new  Polygon(); //这是原型继承关键的一句
Triangle.prototype.getArea = function (){}

//new个对象
var  tri = new  Triangle();
console.log(tri.sides); //继承的属性
console.log(tri.setSides); //继承的方法
console.log(tri.getArea); //自有方法

//instanceof测试
console.log(tri instanceof  Triangle); //true，表明该对象是三角形
console.log(tri instanceof  Polygon); //true，表明三角形也是多边形

虽然从输出可以看出子类继承了父类Polygon的属性sides和方法setSides，但sides是0，怎么会是三角形呢。还得调用下tri.setSides(3)使之成为三角形。这样似乎很不方便。不能传参数，即是原型方式的缺点。优点是正确的维护了"is a"的关系。

 

3、组合构造函数/原型方式写类，采用前面种方式继承

这种方式父类，子类的属性都挂在构造函数里，方法都挂在原型上。

/**
 * 父类Polygon:多边形
 */
function  Polygon(sides) {
    this .sides = sides;
}
Polygon.prototype.setSides = function (s) { this .sides=s;}

/**
 * Triangle 三角形
 * @param {Object} base 底
 * @param {Object} height 高
 */
function  Triangle(base,height) {
    Polygon.call( this ,3); //复制父类属性给自己
    this .base = base;
    this .height = height;
}
Triangle.prototype = new  Polygon(); //复制父类方法给自己

Triangle.prototype.getArea = function (){ //最后定义自己的方法
    return  this .base* this .height/2;
}

//new个对象
var  tri = new  Triangle(12,4);
console.log(tri.sides); //继承的属性
console.log(tri.setSides); //继承的方法
console.log(tri.base); //自有属性
console.log(tri.height); //自有属性
console.log(tri.getArea); //自有方法

//instanceof测试，表明正确的维护了"is a"的关系
console.log(tri instanceof  Triangle); //true，表明该对象是三角形
console.log(tri instanceof  Polygon); //true，表明三角形也是多边形