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 July 2015.
Object.create() 静的メソッドは、既存のオブジェクトを新しく生成されるオブジェクトのプロトタイプとして使用して、新しいオブジェクトを生成します。
試してみましょう
const person = {
isHuman: false,
printIntroduction: function () {
console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
},
};
const me = Object.create(person);
me.name = "Matthew"; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // Inherited properties can be overwritten
me.printIntroduction();
// Expected output: "My name is Matthew. Am I human? true"
構文
Object.create(proto)
Object.create(proto, propertiesObject)
引数
proto-
新たに生成されるオブジェクトのプロトタイプになるべきオブジェクトです。
propertiesObject省略可-
指定されていて、
undefinedでない場合、それ自身の列挙可能なプロパティが、それらのプロパティ名を伴う一連のプロパティ記述子を指定し、新たに生成されるオブジェクトに追加されることになります。これらのプロパティは、Object.defineProperties()の 2 番目の引数に対応するものです。
返値
指定したプロトタイプオブジェクトとプロパティを持つ新しいオブジェクトです。
例外
例
Object.create() を用いた古典的な継承
以下の例は、古典的な継承をするための Object.create() の使用方法です。これは、すべての 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.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 つ目の引数は プロパティ記述子 に割り当てられたキーであることに注意してください。これは、オブジェクト初期化子ではできない、各プロパティの列挙可能性や設定可能性なども制御できることを意味しています。
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__ キーが同等の構文になります。
o = Object.create(null);
// Is equivalent to:
o = { __proto__: null };
既定では、プロパティは書き込み可能でも、列挙可能でも、設定可能でもありません。
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 を明示的に指定してください。
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 演算子の動作を模倣することができます。
function Constructor() {}
o = new Constructor();
// 次のものと等価です。
o = Object.create(Constructor.prototype);
もちろん、 constructor 関数の中に実際の初期化コードがある場合、 Object.create() メソッドにそれを反映させることはできません。
仕様書
| Specification |
|---|
| ECMAScript® 2026 Language Specification # sec-object.create |