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