JavaScript 第5版 - 9章 クラスとコンストラクタとプロトタイプ(3)

9.4 オブジェクト共通メソッド

• JavaScirptで独自のクラスを定義する場合、次のようなメソッドを定義しておくと良い。

9.5 スーパークラスとサブクラス

プロトタイプチェーンを利用して、スーパークラスを継承したサブクラスを定義することができます。

//スーパークラス
function Rectangle(w, h) {
    this.width = w;
    this.height = h;
}
Rectangle.prototype.area = function() { return this.width * this.height; }

// サブクラス
function PositionedRectangle(x, y, w, h) {
    // スーパークラスのコンストラクタを呼び出す。コンストラクタチェーン。
    Rectangle.call(this, w, h);
    this.x = x;
    this.y = y;
}
// サブクラスのプロトタイプオブジェクトを、スーパークラスのコンストラクタを使って明示的に生成。
// 明示的に生成しない場合、Objectの直接のサブクラスになる。
PositionedRectangle.prototype = new Rectangle();

// サブクラスに不要なプロパティはプロトタイプから削除。
delete PositionedRectangle.prototype.width;
delete PositonedRectangle.prototype.height;

// サブクラスのプロトタイプオブジェクトは、スーパークラスのインスタンスであるため、
// サブクラスのプロトタイプオブジェクト(正確には、プロトタイプオブジェクトのプロトタイプ)は、
// スーパークラスのコンストラクタ関数を参照するconstructorプロパティを持っている。
// サブクラスでは、サブクラスのコンストラクタ関数を参照するようにするため、
// サブクラスのコンストラクタ関数への参照を持つconstructorプロパティを、サブクラスのプロトタイプオブジェクトに追加。
PositionedRectangle.prototype.constructor = PositionedRectangle;

// サブクラスのインスタンスメソッドをプロトタイプに追加。
PositionedRectangle.prototype.contains = function(x, y) {
    return (x > this.x && x < this.x + this.width && y > this.y && y < this.y + this.height);
}

プロトタイプとプロトタイプチェーンの仕組みを理解できていれば、それほど悩まずに理解できると思います。

この方法でサブクラスを定義する場合に気をつけておかないとならないのは、サブクラスのプロトタイプオブジェクトはスーパークラスのインスタンスであるという点です。スーパークラスから継承されたプロパティ(widthやheight)は、プロトタイプチェーンによって、サブクラス→サブクラスのプロトタイプ=スーパークラスのインスタンス→スーパークラスのプロトタイプと参照されているにすぎません。スーパークラスから継承されたプロパティは、サブクラスのプロトタイプオブジェクトのプロトタイプのプロパティということになります。

PositionedRectangle.prototype.superclass = Rectangle;

function PositionedRectangle(x, y, w, h) {
    this.superclass(w, h);
    this.x = x;
    this.y = y;
}

PositionedRectangle.prototype.toString = function() {
    return '(' + this.x + ',' + this.y + ') ' + Rectangle.prototype.toString.apply(this);
}

PositionedRectangle.prototype.toString = function() {
    return '(' + this.x + ',' + this.y + ') ' + this.superclass.prototype.toString.apply(this);
}