Object.create()メソッドは、指定されたプロトタイプオブジェクトとプロパティを使用して、新しいオブジェクトを作成します。

• 文法
• サンプル
• Polyfill
• ブラウザ互換性
• 関連項目

文法

Object.create(proto [, propertiesObject ])

引数	説明
proto	新しく作成されるオブジェクトのprototypeとなるべきオブジェクトを指定します。
[propertiesObject]	指定され且つ未定義でなければ、オブジェクト自身で列挙可能なプロパティとなります。 （つまり、それら自身の上に定義されたプロパティであり、且つそのプロトタイプチェーンに沿って列挙されないプロパティです） 対応するプロパティ名で、新しく作成されるオブジェクトに追加されるプロパティ記述子(descriptor)を指定します。 これらのプロパティは、Object.definePropertiesの第2引数に相当します。

Throws

もし、proto引数がnull、またはオブジェクトで無ければ、 TypeError例外をスローします。

サンプル

Object.createを使用したClass風の継承

下記は、Object.createを使用したClass風の継承の使用方法をまとめたものになります。 これは全てのJavaScriptをサポートする単一継承です。

// Shape(形状) - スーパークラス
function Shape() {
  this.x = 0;
  this.y = 0;
}
// スーパークラスのメソッド
Shape.prototype.move = function(x, y) {
    this.x += x;
    this.y += y;
    console.info("Shape moved.");
};


// Rectangle(長方形) - サブクラス
function Rectangle() {
  // スーパークラス(Shape)のコンストラクタ呼び出し
  Shape.call(this);
}


// サブクラスがスーパークラスを拡張
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

rect instanceof Rectangle // true.
rect instanceof Shape // true.

rect.move(1, 1); // "Shape moved."を出力

もし複数のオブジェクトから継承したい場合は、 ミックスインという選択を取ることも出来ます。

function MyClass() {
     SuperClass.call(this);
     OtherSuperClass.call(this);
}

//継承
MyClass.prototype = Object.create(SuperClass.prototype);
//ミックスイン
mixin(MyClass.prototype, OtherSuperClass.prototype);

MyClass.prototype.myMethod = function() {
     // 何かを行う
};

mixin関数はスーパークラスのprototypeからサブクラスのprototypeへ関数をコピーする処理を行うものとし、 それはユーザーによって提供される必要があります。 例えば、このmixinのような関数には、jQuery.extendがあります。

Object.createを使用した<propertiesObject>引数の使用について

var o;

// prototypeとして、nullを使用してオブジェクトを作成
o = Object.create(null);


o = {};
// 上記と下記は、同義です。
o = Object.create(Object.prototype);


// 例として、同じプロパティの組を使用してオブジェクトを作成します。
// (2つ目の引数は、キーをプロパティ記述子にマッピングしていることに注意してください。)
o = Object.create(Object.prototype, {
  // fooは通常の"値プロパティ"です。
  foo: { writable:true, configurable:true, value: "hello" },
  // barはgetterとsetter(アクセサー)プロパティです。
  bar: {
    configurable: false,
    get: function() { return 10 },
    set: function(value) { console.log("Setting `o.bar` to", value) }
}});


function Constructor(){}
o = new Constructor();
// 上記と下記は、同義です。
o = Object.create(Constructor.prototype);
// もちろん、実際の初期化コードがConstructor関数内に存在すれば、
// Object.createは、それを反映することが出来ません。


// 新しいオブジェクトを作成し、そのprototypeを新しいからオブジェクトとし、
// それに値42を持つ単一のプロパティ'p'を追加しています。
o = Object.create({}, { p: { value: 42 } })

// デフォルトでは、プロパティは"書き込み・列挙・設定不可"です。
o.p = 24
o.p
// 42

o.q = 12
for (var prop in o) {
   console.log(prop)
}
// "q"

delete o.p
// false

// ES3(ES3: ECMAScript262-3rd)プロパティを指定
o2 = Object.create({}, { p: {
      value: 42,
      writable: true,
      enumerable: true,
      configurable: true }
});

ES3プロパティの詳細とその問題点については、下記の記事が参考になります。
プロトタイプ汚染とループ - latest log

Polyfill

このpolyfillは、任意のprototypeを選んで新しいオブジェクトを作成する事をカバーするものですが、 第2引数は受け取りません。

if (typeof Object.create != 'function') {
    (function () {
        var F = function () {};
        Object.create = function (o) {
            if (arguments.length > 1) {
              throw Error('Second argument not supported');
            }
            if (o === null) {
              throw Error('Cannot set a null [[Prototype]]');
            }
            if (typeof o != 'object') {
              throw TypeError('Argument must be an object');
            }
            F.prototype = o;
            return new F();
        };
    })();
}

ブラウザ互換性

デスクトップ

機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	5	4.0 (2)	9	11.6	5

モバイル

機能	Android	Chrome for Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	◯	◯	4.0 (2)	◯	11.5	◯

関連項目

• Object.defineProperty
• Object.defineProperties
• Object.prototype.isPrototypeOf
• John Resig's post on getPrototypeOf

 Back to top