ES5入門 - Object.create()編

ES5入門 - Object.create()編

本エントリーは「to-R JavaScript Advent Calendar 2015」11日目のエントリー、ES5のObject.create()周りについて解説します。

ES5入門ですが、1回目がArray編、2回目がJSON編で今回がObject.create()編となります。

Object.create()はオブジェクトを生成するためのメソッドで、引数で指定したオブジェクトをprototypeにもつオブジェクトを生成します。

以下のサンプルではobjectAをprototypeにもつobjectBを作成しています。そのためobjectBはobjectAが持つメソッドやプロパティが利用可能です。

var objectA = {
	name:"John",
	say:function(){
		console.log("My name is "+this.name);
	}
}
var objectB = Object.create(objectA);
  
objectA.say(); // My name is John
objectB.say(); // My name is John
objectAに対して変更を加えた場合は、それをprototypeとして利用しているobjectBに対しても変更が反映されます。 
objectA.name = "Michael";
 
objectA.say(); // My name is Michael
objectB.say(); // My name is Michael
しかし、objectBに対する変更はobjectAに対して影響を与えませんので必要に応じて処理を上書きすることができます。 
objectB.name = "Richard";
 
objectA.say(); // My name is Michael
objectB.say(); // My name is Richard

利用方法としてよく使われるのがクラスの継承時です。

クラスの継承

以下のように継承時に新しいクラスのprototypeに

//ClassAを作成
var ClassA = function(){}
ClassA.prototype.name = "John";
ClassA.prototype.say = function(){
	console.log("My name is "+this.name);
}
 
//ClassAを継承したClassBを作成
var ClassB = function(){}
ClassB.prototype = Object.create(ClassA.prototype);
ClassB.prototype.constructor = ClassA;
ClassB.prototype.name = "Michael";
 
var classA = new ClassA();
classA.say(); // My name is John
 
var classB = new ClassB();
classB.say(); // My name is Michael

Object.create()を使わない場合は、これまでどおり以下のように継承することも可能ですが、継承のためにコンストラクタを実行する必要があり予期せぬトラブルを引き起こすことがあるので注意が必要です。

ClassB.prototype = new ClassA();

IE8以下を気にしなくて良いのならObject.create()を使わない理由はないでしょう。

次回はObject.create()以外のObjectについて解説を行います。

スポンサードリンク

«ES5入門 - JSON編 | メイン | ES5入門 - Object編»