JavaScriptのnew演算子を使わないオブジェクト生成法

Pocket

JavaScriptはプロトタイプベースのオブジェクト指向だといわれてるが、他言語(クラスベース)と同様にnew演算子を使ってオブジェクトを作ることが可能なのですが、newが原因でバグを生み出し探しまわるのに時間をかけるはめになってしまうなんてことも。。。

newがなぜいけないのかという解説は、別のところにまかせて今回は、Object.createメソッドを使ったオブジェクトの生成とその一歩先をいったオブジェクトの生成法であるファクトリ関数を作成するところまで紹介します。

Object.createメソッド

Object.createメソッドは、引数にプロトタイプを取りオブジェクトを返すメソッドです。
このメソッドを使ってプロタイプベースの犬オブジェクトを作ってみます。

var proto = {
  cry : function(){
    console.log('bow-wow !');
  }
};

var dog = Object.create( proto );
dog.name = 'pochi';
dog.age = 7;

1行目から5行目までは、プロタイプオブジェクトを作っています。
ここにオブジェクトで共通する属性やメソッドを定義します。

次に7行目から9行目にかけてオブジェクトを作っています。
でもこれでは、煩わし過ぎてオブジェクトを生成する度にコードがかなり肥大していきます。
そこで登場するのが、ファクトリ関数です。

ファクトリ関数

それを解決すべくファクトリ関数というのをつくって、いけてる感じにしてみます。
ファクトリ関数は、make<オブジェクト名>という感じで、命名し識別しやすくするのが慣例です。
それでは、先ほどコードをファクトリ関数を使ってリファクタリングしてみます。

var proto = {
  cry : function(){
    console.log('bow-wow !');
  }
};

var makeDog = function( name, age ){
  var dog = Object.create( proto );
  dog.name = name;
  dog.age = age;
  return dog;
};

var pochi = makeDog('pochi', 7);

7行目以下に注目してください。
ファクトリ関数を使い、14行目のようにスッキリとオブジェクトをつくることができ、これでオブジェクトが増える度に煩わしい作業が増えるということはなくなりました。

古いブラウザ対応

ファクトリ関数には、Object.createメソッドを使っていますが、このメソッド実はIE6、7、8には対応していないのです。
互換性を保つために、対応していないブラウザではObject.createメソッドを作り、対応しているブラウザにはそのまま使うというコードを追加しましょう。
そのコードは以下です。

var objectCreate = function( arg ){
  if ( ! arg ) { return {} };
  function obj() {};
  obj.prototype = arg;
  return new obj;
}

Object.create = Object.create || objectCreate;
Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>