構造函數的繼承——使用原型對象（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
複製代碼