Jump to the content

ステップアップのためのJavascriptデザインパターン入門(2) - コンストラクタパターン

JavaScript

    ステップアップのためのJavascriptデザインパターン入門(2) - コンストラクタパターン

    前回は第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
    

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×