JavaScript面向对象继承方式归纳

Kao 发布于
没有评论 发表评论

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

 

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

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

Js代码
  1. **
  2.  * 父类Polygon:多边形
  3.  * @param {Object} sides
  4.  */
  5. function Polygon(sides) {
  6.     this.sides = sides;
  7.     this.setSides = function(s) {this.sides=s;}
  8. }
  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. }
  20. //new个对象
  21. var tri = new Triangle();
  22. console.log(tri.sides);//继承的属性
  23. console.log(tri.setSides);//继承的方法
  24. console.log(tri.getArea);//自有的方法
  26. //缺点是对于Triangle的实例对象用instanceof为父类Polygon时是false
  27. console.log(tri instanceof Triangle);//true
  28. console.log(tri instanceof Polygon);//false

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

Js代码
  1. function Triangle() {
  2.     Polygon.call(this,3); //call方式调用父类
  3.     this.getArea = function(){};
  4. }
  5. function Triangle() {
  6.     Polygon.apply(this,[3]); //apply方式调用父类
  7.     this.getArea = function(){};
  8. }
  9. 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. }

 

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

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

Js代码
  1. /**
  2.  * 父类Polygon:多边形
  3.  *
  4.  */
  5. function Polygon() {}
  6. Polygon.prototype.sides = 0;
  7. Polygon.prototype.setSides = function(s) {this.sides=s;}
  9. /**
  10.  * 子类Triangle:三角形
  11.  */
  12. function Triangle() {}
  13. Triangle.prototype = new Polygon(); //这是原型继承关键的一句
  14. Triangle.prototype.getArea = function(){}
  16. //new个对象
  17. var tri = new Triangle();
  18. console.log(tri.sides);//继承的属性
  19. console.log(tri.setSides);//继承的方法
  20. console.log(tri.getArea);//自有方法
  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、组合构造函数/原型方式写类，采用前面种方式继承

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

Js代码
  1. /**
  2.  * 父类Polygon:多边形
  3.  */
  4. function Polygon(sides) {
  5.     this.sides = sides;
  6. }
  7. Polygon.prototype.setSides = function(s) {this.sides=s;}
  9. /**
  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();//复制父类方法给自己
  21. Triangle.prototype.getArea = function(){ //最后定义自己的方法
  22.     return this.base*this.height/2;
  23. }
  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);//自有方法
  33. //instanceof测试，表明正确的维护了”is a”的关系
  34. console.log(tri instanceof Triangle);//true，表明该对象是三角形
  35. console.log(tri instanceof Polygon);//true，表明三角形也是多边形

 

分类：JavaScript | 标签：

About Kao

View all posts by Kao→
声明：本文采用 BY-NC-SA 协议进行授权，本文链接：JavaScript面向对象继承方式归纳

发表回复