推荐订阅源

面向对象的语言多数都支持继承，继承最重要的优点就是代码复用，从而构建大型软件系统。如果一个类能够重用另一个类的属性和或方法，就称之为继承。从这个角度来看看JS的继承方式。JS中继承方式与写类方式息息相关。不同的写类方式造成不同的继承方式。各种流行JavaScript库继承方式也各不相同。从最简单的复用开始。

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

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

 
 
 
 
function Polygon(sides) {  
    this.sides = sides;  
    this.setSides = function(s) {this.sides=s;}  
}  
 
 
 
 
function Triangle() {  
    this.tempfun = Polygon; 
    this.tempfun(3); 
    delete this.tempfun; 
    this.getArea = function(){};  
}  
 
 
var tri = new Triangle();  
console.log(tri.sides); 
console.log(tri.setSides); 
console.log(tri.getArea); 
 
 
console.log(tri instanceof Triangle); 
console.log(tri instanceof Polygon); 

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

function Triangle() {  
    Polygon.call(this,3);  
    this.getArea = function(){};      
}  
function Triangle() {  
    Polygon.apply(this,[3]);  
    this.getArea = function(){};  
}  
function Triangle() {  
    var temp = new Polygon(3);  
    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)系统，而是使用原型继承来实现自己的对象系统。工作中我们也可以用原型方式来实现继承，代码复用以构建自己的功能模块。

 
 
 
 
function Polygon() {}  
Polygon.prototype.sides = 0;  
Polygon.prototype.setSides = function(s) {this.sides=s;}  
 
 
 
 
function Triangle() {}  
Triangle.prototype = new Polygon();  
Triangle.prototype.getArea = function(){}  
 
 
var tri = new Triangle();  
console.log(tri.sides); 
console.log(tri.setSides); 
console.log(tri.getArea); 
 
 
console.log(tri instanceof Triangle); 
console.log(tri instanceof Polygon); 

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

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

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

 
 
 
function Polygon(sides) {  
    this.sides = sides;  
}  
Polygon.prototype.setSides = function(s) {this.sides=s;}  
 
 
 
 
 
 
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;  
}  
 
 
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); 
 
 
console.log(tri instanceof Triangle); 
console.log(tri instanceof Polygon);