【JavaScript】Prototype とは

Prototype とは

全てのオブジェクトは、Prototype プロパティを持つ。
Prototype の値はオブジェクトか null が入る。

const obj = {
  key: "value",
  [[Prototype]]: Object
};

JavaScript は、オブジェクトのプロパティが存在しなかった際、Prototype をみに行き、該当するプロパティがないか探しにいく。

以下だと、obj に hoge というプロパティは同階層には存在しないため、obj の Prototype をみにいき、該当するプロパティを探しにいく。

obj.hoge

Prototype の中はオブジェクトであり、さらにそのオブジェクトの中にも Prototype が存在している。このように Prototype が連鎖上に連なっていることを、プロトタイプチェーンと呼ぶ。

上記例だと、hoge というプロパティは、プロトタイプチェーン上に存在しない (=厳密には末端の Prototype に null が入っておりもうこれ以上遡れないため) ため undefined を返す。

Prototype を見るには？

object を出力してみる。

console.log(obj)

getter が存在するため、以下のようにしても参照可能。

console.log(obj.__proto__);

Prototype を設定する

setter が存在するので下記のようにすれば Prototype を設定できる。

const obj = {
  a: 1,
  b: 2,
};

obj.__proto__ = {
  c: 3,
};

console.log(obj);

Prototype を操作する

Prototype を参照/更新する方は他にもある。

getPrototypeOf(obj)

getPrototypeOf で引数で渡したオブジェクトの Prototype をみることができる。

Object.getPrototypeOf(obj)

setPrototypeOf(obj, 設定したいobj)

setPrototypeOf で、第一引数で渡したオブジェクトの Prototype に、第二引数で渡したオブジェクトを設定する。

Object.setPrototypeOf(obj, {
  d: 4,
});

Object.create()

Object.create() で、新規でオブジェクトを作成しつつ、引数で渡したオブジェクトをその Prototype に設定できる。

const obj = Object.create({ c: 3 });
obj.a = 1;
obj.b = 2;

console.log(obj);

どっちを使えばいいの？

Prototype を設定する際は、getPrototypeOf() よりもなるべく Object.create() を使用するようにする。
Object.create() はオブジェクトを新規で作成する際に設定できるので、断然早い。