构造函数的继承——使用原型对象（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
复制代码