ステップアップのためのJavascriptデザインパターン入門（２） 【コンストラクタパターン】

前回は第1回目ということで、そもそもデザインパターンとはなんぞや？という話に触れました。
今回から具体的なデザインパターンについて紹介していきます。

コンストラクタパターン

コンストラクタ（Constructor）とはオブジェクトを作成し、初期化する関数のことです。
コンストラクタはJavascript以外の言語では「クラス」と呼ばれています。
プロトタイプベースの言語であるJavascriptでは、クラスの概念がありませんが、コンストラクタを作成することでクラスに似たオブジェクトを作成することができます。
コンストラクタは、オブジェクトを使用するための準備を行い、引数を受け取りオブジェクトの初回作成時にメンバのプロパティやメソッドに値を設定するのに利用します。

// コンストラクタを定義する
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.getName = function() {
        return this.name;
    };
}

// new キーワードをつけてインスタンスを生成する
var person = new Person('John', 20);
console.log(person.getName()); // John

コンストラクタの定義は関数文を使い、そのブロック内で this キーワードを使い自分自身にアクセスし、プロパティやメソッドを設定します。
コンストラクタの呼び出し時は new キーワードをつけて呼び出し、インスタンスと呼ばれるコンストラクタの分身を作成します。

上記のコード例では、コンストラクタ内でメソッドを定義しました。
しかし、上記のメソッドの定義方法は決してスマートとは言えません。
インスタンスを作成する度にメソッドが作られ、インスタンスを複数作った時にインスタンス全体に変更をしたい場合、オブジェクトの共通化出来ていないため、全て一度に変更することができません。
また、インスタンスを作成するたびに無駄なメモリを消費するため、効率としては非効率です。
そこで prototype と呼ばれるオブジェクトのプロパティを使用します。

// コンストラクタを定義する
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// プロトタイプを拡張してgetNameというメソッドを追加
Person.prototype.getName = function() {
    return this.name;
}

// new キーワードをつけてインスタンスを生成する
var person = new Person('John', 20);
console.log(person.getName()); // John

これで1つのgetName()メソッドがすべてのPersonオブジェクトで共有されます。

// プロトタイプを変更
Person.prototype.getName = function() {
    return 'Hello! ' + this.name;
}

console.log(person.getName()); // Hello! John

[aside type=”boader”]

「ステップアップのためのJavaScriptデザインパターン入門」記事一覧

• 第1回：デザインパターンとは
• 第2回：コンストラクタパターン
• 第3回：モジュールパターン
• 第4回：リビーリングモジュールパターン
• 第5回：シングルトンパターン

[/aside]