JavaScript继承方式（1）


前段时间温故了下JS OO之写类方式，从这篇开始我们看看JS OO之继承方式。
面向对象的语言多数都支持继承，继承最重要的优点就是代码复用，从而构建大型软件系统。如果一个类能够重用另一个类的属性和或方法，就称之为继承。从这个角度来看看JS的继承方式。JS中继承方式与写类方式息息相关。不同的写类方式造成不同的继承方式。各种流行JS库继承方式也各不相同。从最简单的复用开始。
 
1、构造函数方式写类，通过方法调用复制父类属性/字段到子类 实现继承
这里父类，子类都采用构造函数方式写，不用原型。子类调用父类函数来复制父类的属性。
view sourceprint?01 /**  
02  * 父类Polygon:多边形  
03  * @param {Object} sides  
04  */ 
05 function Polygon(sides) {  
06     this.sides = sides;  
07     this.setSides = function(s) {this.sides=s;}  
08 }  
09    
10 /**  
11  * 子类Triangle:三角形  
12  */ 
13 function Triangle() {  
14     this.tempfun = Polygon;//父类引用赋值给子类的一个属性tempfun  
15     this.tempfun(3);//调用  
16     delete this.tempfun;//删除该属性  
17     this.getArea = function(){};  
18 }  
19    
20 //new个对象   
21 var tri = new Triangle();  
22 console.log(tri.sides);//继承的属性  
23 console.log(tri.setSides);//继承的方法  
24 console.log(tri.getArea);//自有的方法  
25    
26 //缺点是对于Triangle的实例对象用instanceof为父类Polygon时是false  
27 console.log(tri instanceof Triangle);//true  
28 console.log(tri instanceof Polygon);//false 
因为 JavaScript中具名函数的多种调用方式 ，子类还可以有以下的多种实现方式。只是在子类中调用父类方法不同而已。 
view sourceprint?01 function Triangle() {  
02     Polygon.call(this,3); //call方式调用父类  
03     this.getArea = function(){};      
04 }  
05 function Triangle() {  
06     Polygon.apply(this,[3]); //apply方式调用父类  
07     this.getArea = function(){};  
08 }  
09 function Triangle() {  
10     var temp = new Polygon(3); //new方式调用父类  
11     for(atr in temp) { //全部复制给子类  
12         this[atr] = temp[atr];  
13     }     
14     this.getArea = function(){};  
15 } 
这种方式的缺点是子类的实例对象用instanceof检查父类时总是false。这与java中继承"is a "的关系是违背的。
 
2、原型方式写类，原型方式继承
core JS自身的对象系统就是采用原型方式(prototype based)继承的。或者说core JS没有采用常见的类继承(class based)系统，而是使用原型继承来实现自己的对象系统。工作中我们也可以用原型方式来实现继承，代码复用以构建自己的功能模块。  
view sourceprint?01 /**  
02  * 父类Polygon:多边形  
03  *   
04  */ 
05 function Polygon() {}  
06 Polygon.prototype.sides = 0;  
07 Polygon.prototype.setSides = function(s) {this.sides=s;}  
08    
09 /**  
10  * 子类Triangle:三角形  
11  */ 
12 function Triangle() {}  
13 Triangle.prototype = new Polygon(); //这是原型继承关键的一句  
14 Triangle.prototype.getArea = function(){}  
15    
16 //new个对象  
17 var tri = new Triangle();  
18 console.log(tri.sides);//继承的属性  
19 console.log(tri.setSides);//继承的方法  
20 console.log(tri.getArea);//自有方法  
21    
22 //instanceof测试  
23 console.log(tri instanceof Triangle);//true，表明该对象是三角形  
24 console.log(tri instanceof Polygon);//true，表明三角形也是多边形 
虽然从输出可以看出子类继承了父类Polygon的属性sides和方法setSides，但sides是0，怎么会是三角形呢。还得调用下tri.setSides(3)使之成为三角形。这样似乎很不方便。不能传参数，即是原型方式的缺点。优点是正确的维护了"is a"的关系。
 
3、组合构造函数/原型方式写类，采用前面种方式继承
这种方式父类，子类的属性都挂在构造函数里，方法都挂在原型上。
view sourceprint?01 /**  
02  * 父类Polygon:多边形  
03  */ 
04 function Polygon(sides) {  
05     this.sides = sides;  
06 }  
07 Polygon.prototype.setSides = function(s) {this.sides=s;}  
08    
09 /**  
10  * Triangle 三角形  
11  * @param {Object} base 底  
12  * @param {Object} height 高  
13  */ 
14 function Triangle(base,height) {  
15     Polygon.call(this,3);//复制父类属性给自己  
16     this.base = base;  
17     this.height = height;  
18 }  
19 Triangle.prototype = new Polygon();//复制父类方法给自己  
20    
21 Triangle.prototype.getArea = function(){ //最后定义自己的方法  
22     return this.base*this.height/2;  
23 }  
24    
25 //new个对象  
26 var tri = new Triangle(12,4);  
27 console.log(tri.sides);//继承的属性  
28 console.log(tri.setSides);//继承的方法  
29 console.log(tri.base);//自有属性  
30 console.log(tri.height);//自有属性  
31 console.log(tri.getArea);//自有方法  
32    
33 //instanceof测试，表明正确的维护了"is a"的关系  
34 console.log(tri instanceof Triangle);//true，表明该对象是三角形  
35 console.log(tri instanceof Polygon);//true，表明三角形也是多边形

补充：web前端 , JavaScript ,