构造函数的继承——使用原型对象(prototype)

栏目: JavaScript · 发布时间: 5年前

内容简介:构造函数是JavaScript中生成实例对象的模板,如何实现构造函数的继承,是JavaScript程序员需要掌握的一项十分重要的技能。 本文将介绍如何使用原型对象,实现构造函数的继承。让一个构造函数继承另一个构造函数,可以分成两步实现。另外一种写法是Son.prototype等于一个父类实例。

构造函数是JavaScript中生成实例对象的模板,如何实现构造函数的继承,是JavaScript程序员需要掌握的一项十分重要的技能。 本文将介绍如何使用原型对象,实现构造函数的继承。

理论讲解

让一个构造函数继承另一个构造函数,可以分成两步实现。

  • 第一步是在子类的构造函数中,调用父类的构造函数。
function Son(value) {
  Father.call(this);
  this.prop = value;
}
复制代码
  • 第二步,是让子类的原型指向父类的原型,这样子类就可以继承父类原型。
Son.prototype = Object.create(Father.prototype);
Son.prototype.constructor = Son;
Son.prototype.method = '...';
复制代码

另外一种写法是Son.prototype等于一个父类实例。

Son.prototype = new Father();
复制代码

实例参考

举例来说,下面是一个Shape构造函数。

function Shape() {
  this.x = 0;
  this.y = 0;
}

Shape.prototype.move = function (x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};
复制代码

我们需要让Rectangle构造函数继承Shape。

// 第一步,子类继承父类的实例
function Rectangle() {
  Shape.call(this); // 调用父类构造函数
}

// 第二步,子类继承父类的原型
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
复制代码

采用这样的写法以后,instanceof运算符会对子类和父类的构造函数,都返回true。

var rect = new Rectangle();

rect instanceof Rectangle  // true
rect instanceof Shape  // true
复制代码

上面代码中,子类是整体继承父类。有时只需要单个方法的继承,这时可以采用下面的写法。

ClassB.prototype.print = function() {
  ClassA.prototype.print.call(this);
  // some code
}
复制代码

继承数组

如果让构造函数的prototype属性指向一个数组,就意味着实例对象可以调用数组方法。

var MyArray = function () {};

MyArray.prototype = new Array();
MyArray.prototype.constructor = MyArray;

var mine = new MyArray();
mine.push(1, 2, 3);
mine.length // 3
mine instanceof Array // true
复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

SRE

SRE

贝特西 拜尔 (Betsy Beyer)、等 / 孙宇聪 / 电子工业出版社 / 2016-10-1 / CNY 108.00

大型软件系统生命周期的绝大部分都处于“使用”阶段,而非“设计”或“实现”阶段。那么为什么我们却总是认为软件工程应该首要关注设计和实现呢?在《SRE:Google运维解密》中,Google SRE的关键成员解释了他们是如何对软件进行生命周期的整体性关注的,以及为什么这样做能够帮助Google成功地构建、部署、监控和运维世界上现存最大的软件系统。通过阅读《SRE:Google运维解密》,读者可以学习到......一起来看看 《SRE》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具