Object.create() - JavaScript | MDN

Toggle sidebar

Theme

OS default
Light
Dark

日本語

Remember language Learn more

Object.create()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

Object.create() は静的メソッドで、既存のオブジェクトを新しく生成されるオブジェクトのプロトタイプとして使用して、新しいオブジェクトを生成します。

試してみましょう

const person = {
  isHuman: false,
  printIntroduction() {
    console.log(`私は ${this.name} です。私は人間でしょうか？ ${this.isHuman}`);
  },
};

const me = Object.create(person);

me.name = "Matthew"; // "name" は "me" に設定されるもので、 "person" にではない
me.isHuman = true; // 継承されたプロパティは上書き可能

me.printIntroduction();
// 予想される結果: "My name is Matthew. Am I human? true"

構文

js
Object.create(proto)
Object.create(proto, propertiesObject)

引数

proto

新たに生成されるオブジェクトのプロトタイプになるべきオブジェクトです。

propertiesObject 省略可

指定されていて、 undefined でない場合、それ自身の列挙可能なプロパティが、それらのプロパティ名を伴う一連のプロパティ記述子を指定し、新たに生成されるオブジェクトに追加されることになります。これらのプロパティは、 Object.defineProperties() の 2 番目の引数に対応するものです。

例外

TypeError

proto が null でも Object でもない場合に発生します。

例

Object.create() を用いた古典的な継承

以下の例は、古典的な継承をするための Object.create() の使用方法です。これは、すべての JavaScript が対応している単一継承です。

js
// 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.call(this); // call super constructor.
}

// サブクラスはスーパークラスを拡張する
Rectangle.prototype = Object.create(Shape.prototype, {
  // Rectangle.prototype.constructor を Rectangle に設定しないと、
  // Shape (親) の prototype.constructor を取ることになります。
  // これを防ぐために、 prototype.constructor を Rectangle (子) に設定します。
  constructor: {
    value: Rectangle,
    enumerable: false,
    writable: true,
    configurable: true,
  },
});

const rect = new Rectangle();

console.log("Is rect an instance of Rectangle?", rect instanceof Rectangle); // true
console.log("Is rect an instance of Shape?", rect instanceof Shape); // true
rect.move(1, 1); // 'Shape moved.' と出力

create() を使用する際には、確実に適切な意味づけをするために constructor プロパティを追加し直すなどの注意点があることに注意してください。 Object.create() は Object.setPrototypeOf() でプロトタイプを変更するよりもパフォーマンスが良いと信じられていますが、インスタンスが作成されておらず、プロパティアクセスがまだ最適化されていない場合、その差は実際にはごくわずかです。現行の JavaScript コードでは、どのような場合でも class 構文を推奨します。

Object.create() と propertiesObject 引数の併用

Object.create() はオブジェクトの作成プロセスを細かく制御することができます。オブジェクト初期化構文は Object.create()の糖衣構文です。 Object.create() を使うと、指定したプロトタイプとプロパティを持つオブジェクトを作成することができます。 2 つ目の引数は プロパティ記述子 に割り当てられたキーであることに注意してください。これは、オブジェクト初期化子ではできない、各プロパティの列挙可能性や設定可能性なども制御できることを意味しています。

js
o = {};
// これは次のものと同等
o = Object.create(Object.prototype);

o = Object.create(Object.prototype, {
  // foo は普通のデータプロパティ
  foo: {
    writable: true,
    configurable: true,
    value: "hello",
  },
  // bar はアクセサープロパティ
  bar: {
    configurable: false,
    get() {
      return 10;
    },
    set(value) {
      console.log("Setting `o.bar` to", value);
    },
  },
});

// プロトタイプが新規の空オブジェクトである新しいオブジェクトを
// 生成し、単一のプロパティ 'p' を値を 42 にして追加します。
o = Object.create({}, { p: { value: 42 } });

Object.create() を使用すると、 null をプロトタイプとするオブジェクトを作成することができます。オブジェクトの初期化子では、 __proto__ キーが同等の構文になります。

js
o = Object.create(null);
// Is equivalent to:
o = { __proto__: null };

既定では、プロパティは書き込み可能でも、列挙可能でも、設定可能でもありません。

js
o.p = 24; // 厳格モードでは例外発生
o.p; // 42

o.q = 12;
for (const prop in o) {
  console.log(prop);
}
// 'q'

delete o.p;
// false; 厳格モードでは例外発生

初期化子と同じ属性を持つプロパティを指定するには、writable、enumerable、configurable を明示的に指定してください。

js
o2 = Object.create(
  {},
  {
    p: {
      value: 42,
      writable: true,
      enumerable: true,
      configurable: true,
    },
  },
);
// これは次のものと等価です。
// o2 = Object.create({ p: 42 })
// which will create an object with prototype { p: 42 }

Object.create() を使用して new 演算子の動作を模倣することができます。

js
function Constructor() {}
o = new Constructor();
// 次のものと等価です。
o = Object.create(Constructor.prototype);

もちろん、 constructor 関数の中に実際の初期化コードがある場合、 Object.create() メソッドにそれを反映させることはできません。

仕様書

Specification

ECMAScript® 2027 Language Specification
# sec-object.create

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025年8月23日 by MDN contributors.

View this page on GitHub • Report a problem with this content