javascript继承方式说明

图标

豆瓜

豆瓜网

豆瓜网专栏

首发
豆瓜 图标 2020-09-10 19:30:09

前段时间温故了下JS OO之写类方式,从这篇开始我们看看JS OO之继承方式。

  面向对象的语言多数都支持继承,继承最重要的优点就是代码复用,从而构建大型软件系统。如果一个类能够重用另一个类的属性和或方法,就称之为继承。从这个角度来看看JS的继承方式。JS中继承方式与写类方式息息相关。不同的写类方式造成不同的继承方式。各种流行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,表明三角形也是多边形


本文由豆瓜网专栏作家 豆瓜 投稿发布,并经过豆瓜网编辑审核。

转载此文章须经作者同意,并附上出处(豆瓜网)及本页链接。

若稿件文字、图片、视频等内容侵犯了您的权益,请联系本站进行 投诉处理

相关搜索

javascript继承
图标 图标

豆瓜

豆瓜网

豆瓜网专栏

  • javascript继承方式说明

    图标
    豆瓜 图标 · 今天 19:30:09 · 0浏览
  • js调用webservice详解

    图标
    豆瓜 图标 · 今天 19:28:46 · 7浏览
  • priorityqueue实现说明

    图标
    豆瓜 图标 · 今天 19:25:46 · 3浏览
  • 全部评论

    豆瓜

    豆瓜网

    豆瓜网专栏

  • javascript继承方式说明
  • js调用webservice详解
  • priorityqueue实现说明
  • lightswitch框架说明
  • 用户体验的五项原则
  • 我来说两句