フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)Object.createの使いどころ

new演算子と混同されがちなObject.createなので、基本的な役割と使いどころをメモしておきます。

new演算子との違い

new演算子はオブジェクトの実体化を行います。プロパティは全て元のオブジェクトからコピーされ、新しいものとしてメモリ上に保持されます。Object.createは指定したオブジェクトをprototypeに持つ新しいオブジェクトを作成します。prototypeは参照値なので、複数のオブジェクトの実体化を行う場合は、共通の関数や定数をprototypeに持たせることで、無駄にメモリを消費することを避ける事ができます。

Object.createの使用例

以下のサンプルは、オブジェクトが持つ全てのプロパティをアラート表示してくれるalertPropertiesメソッドです。utilityオブジェクトに保持させて、後でObject.createの引数として使用します

var utility = 
{
    // オブジェクト内から呼び出すと、
    // そのオブジェクトのプロパティを全てアラート表示するメソッド
    alertProperties:function()
    {
        var proparties = '';
        for(var i in this)
        {
            proparties += (i + ':' + this[i] + '\n');
        }
        alert(proparties);
    }
}

上記のメソッドを開発中の各オブジェクトに持たせたい場合は、各オブジェクトのprototypeに登録します。その際Object.createを使用することで、prototypeへの登録を簡潔に行うことが出来ます。

// 上記alertPropertiesをprototypeに持つオブジェクトを作成
 var obj_a = Object.create(utility);
    
// プロパティを登録
 obj_a.a = 'aaa';
 obj_a.b = 'bbb';

// alertPropertiesを参照しているので使用できる
 obj_a.alertProperties();

仮にここでvar obj_a = new utility()といったようにnew演算子を使うと、作成されたオブジェクトにalertPropertiesがコピーされ、メモリ内部にはalertPropertiesが2つ保持されることになります。

コンストラクタ関数内で使用する場合

コンストラクタ関数を使用して、複数のオブジェクトを作成する場合は以下のようにします。

// コンストラクタ関数を作成した場合は
// 内部でObject.createを使用する
function objectFuctory(a, b){
    var innerObj = Object.create(utility);
    innerObj.a = a;
    innerObj.b = b;
    return innerObj;
}
    
var obj_b = new objectFuctory('aaa', 'bbb');

obj_b.alertProperties();

上記objectFuctory関数で作成したメソッドは全て、alertPropertiesメソッドを参照しているので使用することが、できます。もちろん参照値なので、いくつオブジェクトを作成してもメモリ内部で保持するalertPropertiesは1つだけしか存在しません。