プロトタイプを使ったコード再利用パターン

今年はJavaScriptを勉強しようと思っていまして、ちょこちょこ本などで勉強しています。 おすすめなのが、JavaScriptパターンです。 中上級者向けとのことですが、多くの人におすすめできる良書だと思います。

今回はJavaScriptパターンでも紹介されている、プロトタイプを使ったコード再利用パターンを紹介します。 プロトタイプを使ったコード再利用パターンはよく使われており、JavaScriptの特徴を理解するうえでも重要だと思います。

プロトタイプを使って、親コンストラクタの機能を使用する

コンストラクタ関数Child()が別のコンストラクタParent()からプロパティ(name)を取得できるようにします。

// 親コンストラクタ
function Parent(name) {
    this.name = name || 'Adam';
}

// プロトタイプに機能を追加
Parent.prototype.say = function () {
    return this.name;
}

// 空の子コンストラクタ
function Child(name) {}

// 継承
Child.prototype = new Parent();

var kid = new Child();
console.log(kid.say()); // "Adam"

prototypeプロパティは関数ではなくオブジェクトを指すようにすべきです。こうすることで、new Child()を使ってオブジェクトを作成すると、Parent()インスタンスの機能がプロトタイプを介して得られます。

この方法の欠点
この方法の欠点は、子コンストラクタに渡したパラメータを、親コンストラクタに渡せない点です。

var s = new Child('child');
console.log(s.say()); // "Adam"

これは期待する結果ではありません。
パラメータを渡せるように改良してみます。

子コンストラクタから親コンストラクタにパラメータを渡すようにしたパターン

// 親コンストラクタ
function Parent(name) {
    this.name = name || 'Adam';
}

// プロトタイプに機能を追加
Parent.prototype.say = function () {
    return this.name;
}

// 子コンストラクタ
function Child(name) {
    Parent.apply(this, arguments);
}

// 継承
Child.prototype = new Parent();

var kid = new Child('child');
console.log(kid.say()); // "child"

これで、Childのパラメータを親コンストラクタに渡せるようになりました。

今回の内容は、JavaScriptパターンに詳しく載っています。
さらに詳しく学びたい方は、JavaScriptパターンを一読ください。