javascript类的继承

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

/**  * 父类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中具名函数的多种调用方式 ，子类还可以有以下的多种实现方式。只是在子类中调用父类方法不同而已。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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)系统，而是使用原型继承来实现自己的对象系统。工作中我们也可以用原型方式来实现继承，代码复用以构建自己的功能模块。 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

/**  * 父类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、组合构造函数/原型方式写类，采用前面种方式继承

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

/**  * 父类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，表明三角形也是多边形