継承とプロトタイプチェーン

JavaScript のオブジェクトはプロパティ（自身のプロパティを指す）の動的な「袋」です。 JavaScript のオブジェクトは、プロトタイプオブジェクトへのリンクを持っています。あるオブジェクトのプロパティにアクセスしようとすると、オブジェクトだけでなく、オブジェクトのプロトタイプ、プロトタイプのプロトタイプへと、一致する名前のプロパティが得られるか、プロトタイプチェーンの終端に到達するまで、プロパティの探索が行われます。

オブジェクトの [[Prototype]] を指定する方法はいくつかありますが、それは 後の節 に掲載されています。今のところ、説明のために __proto__ 構文を使用します。ここで注目すべきは、{ __proto__: ... } の構文は、 obj.__proto__ アクセサーとは異なります。前者は標準的なものであり、非推奨ではありません。

{ a: 1, b: 2, __proto__: c } のようなオブジェクトリテラルでは、値 c （これは null か他のオブジェクトでなければなりません）が、リテラル上で [[Prototype]] として表されるオブジェクトになるのに対し、 a や b など他のキーはオブジェクトの 自身のプロパティ となります。この構文では、 [[Prototype]] はオブジェクトの単なる「内部プロパティ」になるため、とても自然に読むことができます。

では、プロパティにアクセスを試みたときに、何が起こるのかを見てみましょう。

const o = {
  a: 1,
  b: 2,
  // __proto__ は [[Prototype]] を設定します。ここでは
  // 他のオブジェクトリテラルとして指定します。
  __proto__: {
    b: 3,
    c: 4,
  },
};

// o.[[Prototype]] は b と c プロパティを持っています。
// o.[[Prototype]].[[Prototype]] は Object.prototype です（意味は後で説明します）。
// そして、 o.[[Prototype]].[[Prototype]].[[Prototype]] は null です。
// null は定義上、 [[Prototype]] を持たないので、これでプロトタイプチェーンは終了です。
// したがって、完全なプロトタイプチェーンは次のようになります。
// { a: 1, b: 2 } ---> { b: 3, c: 4 } ---> Object.prototype ---> null

console.log(o.a); // 1
// 'a' という自身のプロパティが o にあるでしょうか？はい、その値は 1 です。

console.log(o.b); // 2
// 'b' という自身のプロパティが o にあるでしょうか？はい、その値は 2 です。
// プロトタイプにも 'b' プロパティがありますが、アクセスされません。
// これを「プロパティの隠蔽」と呼びます。

console.log(o.c); // 4
// 'c' という自身のプロパティが o にあるでしょうか？いいえ、そのプロトタイプを確認します。
// 'c' という自身のプロパティが o.[[Prototype]] にあるでしょうか？はい、その値は 4 です。

console.log(o.d); // undefined
// 'd' という自身のプロパティが o にあるでしょうか？いいえ、そのプロトタイプを確認します。
// 'd' という自身のプロパティが o.[[Prototype]] にあるでしょうか？いいえ、そのプロトタイプを確認します。
// o.[[Prototype]].[[Prototype]] は Object.prototype であり、既定では 'd' というプロパティはありません。そのプロトタイプを確認します。
// o.[[Prototype]].[[Prototype]].[[Prototype]]  は null であるため探索を中止し、
// プロパティが見つからなかったため undefined を返します。

あるオブジェクトにプロパティを設定すると、自身のプロパティが作られます。この取得と設定の動作のルールの唯一の例外は、ゲッターまたはセッターが介在するときです。

同様に、より長いプロトタイプチェーンを作成することができ、プロパティはそれらすべてに対して探索されます。

const o = {
  a: 1,
  b: 2,
  // __proto__ は [[Prototype]] を設定します。ここでは
  // 他のオブジェクトリテラルとして指定します。
  __proto__: {
    b: 3,
    c: 4,
    __proto__: {
      d: 5,
    },
  },
};

// { a: 1, b: 2 } ---> { b: 3, c: 4 } ---> { d: 5 } ---> Object.prototype ---> null

console.log(o.d); // 5

JavaScript には、クラスベースの言語が定義するような「メソッド」はありません。 JavaScript ではどの関数も、オブジェクトのプロパティという形で追加することができます。継承された関数は、上で見せたようなプロパティの隠蔽（この場合はメソッドのオーバーライドの形）を含め、他のどのプロパティとも同じように動作します。

継承された関数が実行されるときの this の値は、その関数を自身のプロパティとして持つプロトタイプオブジェクトではなく、継承したオブジェクトを指します。

const parent = {
  value: 2,
  method() {
    return this.value + 1;
  }
};

console.log(parent.method()); // 3
// この場合に parent.method が呼び出されたとき、 'this' は parent を指します。

// child は parent を継承するオブジェクト
const child = {
  __proto__: parent,
};
console.log(child.method()); // 3
// child.method が呼び出されると、 'this' は child を参照します。
// つまり、parent のメソッドを child が継承すると、child に
// プロパティ 'value' が求まることになります。しかし、child は
// 'value' という自分自身で呼び出されるプロパティを持っていないので、
// プロパティは parent.value である [[Prototype]] で見つかります。

child.value = 4; // child のプロパティ 'value' に値 4 を代入する。
// これは parent の 'value' プロパティを隠蔽するものです。
// child オブジェクトは次のように見えるようになります。
// { value: 4, __proto__: { value: 2, method: [Function] } }
console.log(child.method()); // 5
// child には 'value' プロパティがあるので、 'this.value' は
// child.value になる

プロトタイプの威力は、特にメソッドの場合、すべてのインスタンスに存在する必要がある場合に、プロパティのセットを再利用できることです。例えば、いくつかのボックスを作成し、それぞれのボックスが getValue 関数でアクセス可能な値を含むオブジェクトであるとします。素朴な実装は次のようになります。

const boxes = [
  { value: 1, getValue() { return this.value; } },
  { value: 2, getValue() { return this.value; } },
  { value: 3, getValue() { return this.value; } },
];

これは、各インスタンスが同じことを行う自分自身で関数プロパティを持つため、冗長で不要なものであり、劣悪です。その代わりに、 getValue をすべてのボックスの [[Prototype]] に移動させることができます。

const boxPrototype = {
  getValue() { return this.value; },
};

const boxes = [
  { value: 1, __proto__: boxPrototype },
  { value: 2, __proto__: boxPrototype },
  { value: 3, __proto__: boxPrototype },
];

こうすることで、すべてのボックスの getValue メソッドが同じ関数を参照するようになり、メモリ使用量を減らすことができます。しかし、オブジェクトを生成するたびに __proto__ を手動で結びつけるのは、まだとても不便です。そこで、オブジェクトを生成するたびに [[Prototype]] を自動的に設定する コンストラクター 関数を使用することになります。コンストラクターは new を使って呼び出される関数です。

// コンストラクター関数
function Box(value) {
  this.value = value;
}

// Box() コンストラクターで作成されたすべてのボックスには、
// 以下のプロパティがあります。
Box.prototype.getValue = function () {
  return this.value;
};

const boxes = [
  new Box(1),
  new Box(2),
  new Box(3),
];

new Box(1) は Box コンストラクター関数から生成された「インスタンス」と言います。 Box.prototype は前回作成した boxPrototype オブジェクトと大きな違いはなく、ただのオブジェクトです。コンストラクター関数から作成されたインスタンスは、自動的にコンストラクターの prototype プロパティを [[Prototype]] として保有します。つまり、 Object.getPrototypeOf(new Box()) === Box.prototype となります。 Constructor.prototype は既定で constructor という自身のプロパティを 1 つ持ち、これがコンストラクター関数自身を参照します。つまり、 Box.prototype.constructor === Box になります。これにより、あらゆるインスタンスから元のコンストラクターにアクセスできるようになります。

上記のコンストラクター関数は、クラスで書き直すことができます。

class Box {
  constructor(value) {
    this.value = value;
  }

  // Box.prototype に作成されるメソッド
  getValue() {
    return this.value;
  }
}

クラスはコンストラクター関数の上の糖衣構文です。つまり、すべてのインスタンスの動作を変更するために Box.prototype を操作することができます。しかし、クラスは基本的なプロトタイプ機構を抽象化するように設計されているので、このチュートリアルではより軽量なコンストラクター関数の構文を使用して、プロトタイプがどのように動作するかを完全に示すことにします。

Box.prototype はすべてのインスタンスの [[Prototype]] と同じオブジェクトを参照しているので、 Box.prototype を変更することですべてのインスタンスの振る舞いを変更することができます。

function Box(value) {
  this.value = value;
}
Box.prototype.getValue = function () {
  return this.value;
};
const box = new Box(1);

// インスタンス作成後に Box.prototype を変更
Box.prototype.getValue = function () {
  return this.value + 1;
};
box.getValue(); // 2

補足すると、 Constructor.prototype の再割り当て (Constructor.prototype = ...) は、 2 つの理由から悪い考えと言えます。

• 再割り当て前に作成されたインスタンスの [[Prototype]] は、再割り当て後に作成されたインスタンスの [[Prototype]] とは別のオブジェクトを参照するようになり、一方の [[Prototype]] を変更しても、もう一方は変更されません。
• constructor プロパティを手動で設定し直さない限り、コンストラクター関数は instance.constructor から辿ることができなくなり、ユーザーの期待を裏切る可能性があります。いくつかの組み込み演算子は constructor プロパティも読み込むので、それが設定されていない場合は期待通りに動作しない可能性があります。

Constructor.prototype はインスタンスを作成するときにのみ有用です。 Constructor.[[Prototype]] とは関係ありません。コンストラクター関数の自身のプロトタイプである Function.prototype、つまり、 Object.getPrototypeOf(Constructor) === Function.prototype とは関係がありません。

JavaScript のいくつかのリテラル構文は、暗黙のうちに [[Prototype]] を設定したインスタンスを作成します。例えば次のようになります。

// オブジェクトのリテラル（`__proto__` キーを持たない）には、
// 自動的に `Object.prototype` が `[[Prototype]]` として設定されます
const object = { a: 1 };
Object.getPrototypeOf(object) === Object.prototype; // true

// 配列リテラルでは、自動的に `Array.prototype` が `[[Prototype]]` となります
const array = [1, 2, 3];
Object.getPrototypeOf(array) === Array.prototype; // true

// RegExp リテラルでは、自動的に `RegExp.prototype` as their `[[Prototype]]`
const regexp = /abc/;
Object.getPrototypeOf(regexp) === RegExp.prototype; // true

「脱糖」してコンストラクターの形にすることができます。

const array = new Array(1, 2, 3);
const regexp = new RegExp("abc");

例えば、 map() のような「配列のメソッド」は、単に Array.prototype で定義されたメソッドであり、そのため、すべての配列のインスタンスで自動的に利用することができます。

歴史的な理由により、いくつかの組み込みコンストラクターの prototype プロパティはインスタンスそのものであることに注目すると興味深いかもしれません。例えば、 Number.prototype は数字の 0、 Array.prototype は空の配列、 RegExp.prototype は /(?:)/ となります。

Number.prototype + 1 // 1
Array.prototype.map((x) => x + 1) // []
String.prototype + "a" // "a"
RegExp.prototype.source // "(?:)"
Function.prototype() // Function.prototype はそれ自身では何もしない関数

しかし、ユーザー定義されたコンストラクターや、 Map のような現代のコンストラクターでは、このようなことは起こりません。

Map.prototype.get(1)
// Uncaught TypeError: get method called on incompatible Map.prototype

Constructor.prototype プロパティは、コンストラクターのインスタンスの [[Prototype]] となり、 Constructor.prototype 自身の [[Prototype]] も含めてそのままの形で表示されます。既定で、 Constructor.prototype は プレーンオブジェクト です。つまり、 Object.getPrototypeOf(Constructor.prototype) === Object.prototype になります。唯一の例外は Object.prototype 自身で、その [[Prototype]] は null です - つまり、 Object.getPrototypeOf(Object.prototype) === null ということです。したがって、典型的なコンストラクターは以下のようなプロトタイプチェーンを構築します。

function Constructor() {}

const obj = new Constructor();
// obj ---> Constructor.prototype ---> Object.prototype ---> null

もっと長いプロトタイプチェーンを構築する場合は、 Constructor.prototype の [[Prototype]] を Object.setPrototypeOf() 関数で設定することができます。

function Base() {}
function Derived() {}
// `Derived.prototype` の `[[Prototype]]` を
// `Base.prototype` に設定
Object.setPrototypeOf(
  Derived.prototype,
  Base.prototype,
);

const obj = new Derived();
// obj ---> Derived.prototype ---> Base.prototype ---> Object.prototype ---> null

クラスの用語では、これは extends 構文を使用するのと同じです。

class Base {}
class Derived extends Base {}

const obj = new Derived();
// obj ---> Derived.prototype ---> Base.prototype ---> Object.prototype ---> null

また、古いコードで Object.create を使用しているものを見かけることがあります。しかし、これは prototype プロパティを再割り当てするため、以前にここで説明した理由から、悪しき習慣と言えます。

function Base() {}
function Derived() {}
// `Derived.prototype` に `Base.prototype` を `[[Prototype]]` とした
// 新しいオブジェクトを再代入う
// これは使わないでください。 — 代わりに Object.setPrototypeOf で変更してください。
Derived.prototype = Object.create(Base.prototype);

その裏側で何が起こっているのか、もう少し詳しく見てみましょう。

JavaScript では、前述したように、関数はプロパティを持つことができます。すべての関数は prototype という名前の特別なプロパティがあります。以下のコードは独立したものであることに注意してください（このウェブページには、以下のコード以外に他の JavaScript は存在しないと考えてよいでしょう）。最高の学習体験をするためには、コンソールを開き、「コンソール」タブに移動して、以下の JavaScript コードをコピー＆ペーストし、 Enter/Return キーを押して実行することを強くお勧めします。（コンソールは、ほとんどのウェブブラウザーの開発者ツールに記載されています。詳しい情報は Firefox 開発者ツール、Chrome 開発者ツール、Edge 開発者ツールを参照してください。

function doSomething() {}
console.log(doSomething.prototype);
// 関数をどのように宣言するかは問題ではありません。
// JavaScript の関数は常に既定のプロトタイププロパティを
// 保有します。ただし、例外が 1 つあります。アロー関数は
// 既定のプロトタイププロパティを持ちません。
const doSomethingFromArrowFunction = () => {};
console.log(doSomethingFromArrowFunction.prototype);

上で見たように、doSomething() は既定で prototype プロパティを所持しており、コンソールに表示されているようになります。このコードの実行後、コンソールにはこのようなオブジェクトが表示されているはずです。

{
  constructor: ƒ doSomething(),
  [[Prototype]]: {
    constructor: ƒ Object(),
    hasOwnProperty: ƒ hasOwnProperty(),
    isPrototypeOf: ƒ isPrototypeOf(),
    propertyIsEnumerable: ƒ propertyIsEnumerable(),
    toLocaleString: ƒ toLocaleString(),
    toString: ƒ toString(),
    valueOf: ƒ valueOf()
  }
}

以下のように、 doSomething() のプロトタイプにプロパティを追加することができます。

function doSomething() {}
doSomething.prototype.foo = 'bar';
console.log(doSomething.prototype);

結果は次の通りです。

{
  foo: "bar",
  constructor: ƒ doSomething(),
  [[Prototype]]: {
    constructor: ƒ Object(),
    hasOwnProperty: ƒ hasOwnProperty(),
    isPrototypeOf: ƒ isPrototypeOf(),
    propertyIsEnumerable: ƒ propertyIsEnumerable(),
    toLocaleString: ƒ toLocaleString(),
    toString: ƒ toString(),
    valueOf: ƒ valueOf()
  }
}

ここで、 new 演算子を使用して、このプロトタイプを元に doSomething() のインスタンスを作成することができます。 new 演算子を使用するには、関数を呼び出す際に new という接頭辞を付ける以外は通常通り行います。 new 演算子を用いて関数を呼び出すと、その関数のインスタンスであるオブジェクトを返します。そして、このオブジェクトにプロパティを追加することができます。

以下のコードを試してみてください。

function doSomething() {}
doSomething.prototype.foo = 'bar'; // プロトタイプにプロパティを追加
const doSomeInstancing = new doSomething();
doSomeInstancing.prop = 'some value'; // オブジェクトにプロパティを追加
console.log(doSomeInstancing);

この結果、以下のような出力が得られます。

{
  prop: "some value",
  [[Prototype]]: {
    foo: "bar",
    constructor: ƒ doSomething(),
    [[Prototype]]: {
      constructor: ƒ Object(),
      hasOwnProperty: ƒ hasOwnProperty(),
      isPrototypeOf: ƒ isPrototypeOf(),
      propertyIsEnumerable: ƒ propertyIsEnumerable(),
      toLocaleString: ƒ toLocaleString(),
      toString: ƒ toString(),
      valueOf: ƒ valueOf()
    }
  }
}

上で見たように、doSomeInstancingの [[Prototype]] は doSomething.prototype です。しかし、これは何をするものなのでしょうか？ doSomeInstancing のプロパティにアクセスするとき、ランタイムはまず doSomeInstancing がそのプロパティを持っているかどうかを調べます。

もし doSomeInstancing がそのプロパティを持っていない場合、ランタイムは doSomeInstancing.[[Prototype]] （別名 doSomething.prototype）でそのプロパティを探します。もし、 doSomeInstancing.[[Prototype]] が探しているプロパティを保有している場合、 doSomeInstancing.[[Prototype]] 上のそのプロパティが使用されます。

そうでなければ、 doSomeInstancing.[[Prototype]] がそのプロパティを持っていなかった場合、 doSomeInstancing.[[Prototype]].[[Prototype]] がそのプロパティを調べることになります。既定で、任意の関数の prototype プロパティの [[Prototype]] は Object.prototype です。そこで、doSomeInstancing.[[Prototype]].[[Prototype]] （別名 doSomething.prototype.[[Prototype]] （別名 Object.prototype））は、検索対象のプロパティを調べることになります。

もしそのプロパティが doSomeInstancing.[[Prototype]].[[Prototype]] の中に見つからなければ、 doSomeInstancing.[[Prototype]].[[Prototype]].[[Prototype]] を探します。しかし、 doSomeInstancing.[[Prototype]].[[Prototype]].[[Prototype]] は存在しません。なぜなら、 Object.prototype.[[Prototype]] は null であるからです。そして、 [[Prototype]] のプロトタイプチェーン全体が調べられた後、ランタイムはプロパティが存在しないことを主張し、プロパティの値は undefined であると結論付けます。

コンソールにもう少しコードを入力してみましょう。

function doSomething() {}
doSomething.prototype.foo = 'bar';
const doSomeInstancing = new doSomething();
doSomeInstancing.prop = 'some value';
console.log('doSomeInstancing.prop:     ', doSomeInstancing.prop);
console.log('doSomeInstancing.foo:      ', doSomeInstancing.foo);
console.log('doSomething.prop:          ', doSomething.prop);
console.log('doSomething.foo:           ', doSomething.foo);
console.log('doSomething.prototype.prop:', doSomething.prototype.prop);
console.log('doSomething.prototype.foo: ', doSomething.prototype.foo);

この結果は以下のようになります。

doSomeInstancing.prop:      some value
doSomeInstancing.foo:       bar
doSomething.prop:           undefined
doSomething.foo:            undefined
doSomething.prototype.prop: undefined
doSomething.prototype.foo:  bar

これまで、オブジェクトを作成し、そのプロトタイプチェーンを変更する多くの方法に触れてきました。それぞれの手法の長所と短所を比較しながら、さまざまな方法を体系的にまとめていきます。

Object.create() を呼び出すと、新しいオブジェクトが作成されます。このオブジェクトの [[Prototype]] がこの関数の最初の引数になります。

const a = { a: 1 };
// a ---> Object.prototype ---> null

const b = Object.create(a);
// b ---> a ---> Object.prototype ---> null
console.log(b.a); // 1 （継承）

const c = Object.create(b);
// c ---> b ---> a ---> Object.prototype ---> null

const d = Object.create(null);
// d ---> null （d はプロトタイプとして直接 null を持つオブジェクト）
console.log(d.hasOwnProperty);
// undefined。 Object.prototype を継承していないため

上記のすべてのメソッドはオブジェクト生成時にプロトタイプチェーンを設定するのに対し、 Object.setPrototypeOf() は既存のオブジェクトの [[Prototype]] 内部プロパティを変更することができます。

const obj = { a: 1 };
const anotherObj = { b: 2 };
Object.setPrototypeOf(obj, anotherObj);
// obj ---> anotherObj ---> Object.prototype ---> null

すべてのオブジェクトは Object.prototype.__proto__ セッターを継承しており、これを使用して既存のオブジェクトの [[Prototype]] を設定することができます（__proto__ キーがオブジェクトでオーバーライドされていない場合）。

const obj = {};
// 使用しないでください。例示のためのものです。
obj.__proto__ = { barProp: 'bar val' };
obj.__proto__.__proto__ = { fooProp: 'foo val' };
console.log(obj.fooProp);
console.log(obj.barProp);

プロトタイプチェーンの上位にあるプロパティを参照する時間は、パフォーマンスにマイナスの影響を与える可能性があり、パフォーマンスが重要視されるコードでは、この影響は大きいかもしれません。さらに、存在しないプロパティにアクセスしようとすると、常にプロトタイプチェーンを完全に縦断することになります。

また、オブジェクトのプロパティを反復処理するときに、プロトタイプチェーン上にあるすべての 列挙可能なプロパティが列挙されることになります。オブジェクトがプロトタイプチェーンのどこかではなく、_自分自身に定義されたプロパティを持っているかどうかを調べるには、 hasOwnProperty または Object.hasOwn メソッドを使用しなければいけません。 [[Prototype]] として null を持つオブジェクトを除くすべてのオブジェクトは、 hasOwnProperty を Object.prototype から継承ししています。ただし、プロトタイプチェーンのさらに下でオーバーライドされている場合を除きます。具体的な例を挙げるために、上記のグラフの例のようなコードを使って説明しましょう。

console.log(g.hasOwnProperty('vertices'));
// true

console.log(Object.hasOwn(g, 'vertices'));
// true

console.log(g.hasOwnProperty('nope'));
// false

console.log(Object.hasOwn(g, 'nope'));
// false

console.log(g.hasOwnProperty('addVertex'));
// false

console.log(Object.hasOwn(g, 'addVertex'));
// false

console.log(Object.getPrototypeOf(g).hasOwnProperty('addVertex'));
// true

注: あるプロパティが undefined であるかどうかを調べるだけでは十分ではありません。プロパティがしっかり存在していて、たまたま undefined に設定されているだけかもしれないからです。

JavaScript は Java や C++ から来た開発者にとっては少し戸惑うかもしれません。なぜなら、JavaScript はすべて動的で、すべて実行時であり、静的な型はまったくないからです。すべてがオブジェクト（インスタンス）か関数（コンストラクター）であり、関数自体も Function コンストラクターのインスタンスです。構文の構成要素である「クラス」でさえ、実行時にはコンストラクター関数に過ぎないのです。

JavaScript のすべてのコンストラクター関数は prototype という特別なプロパティを保有しており、このプロパティは new 演算子と組み合わせて動作します。プロトタイプオブジェクトへの参照は、新しいインスタンスの内部プロパティ [[Prototype]] にコピーされます。例えば、 const a1 = new A() とすると、 JavaScript は（オブジェクトをメモリー上で作成した後、 this を定義した関数 A() を実行する前に） a1.[[Prototype]] = A.prototype を設定します。その後、インスタンスのプロパティにアクセスするとき、 JavaScript はまずそのオブジェクトに直接存在するかどうかを調べ、存在しない場合は [[Prototype]] を探します。すなわち、 a1.doSomething, Object.getPrototypeOf(a1).doSomething, Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething など、見つかるまで、あるいは Object.getPrototypeOf が null を返すまで再帰的に調べられます。これは、 prototype で定義されたすべてのプロパティが、事実上すべてのインスタンスで共有され、後でprototypeの一部を変更しても、その変更が既存のすべてのインスタンスに現れることを意味します。

上の例で、const a1 = new A(); const a2 = new A(); とした場合、a1.doSomething は実際には Object.getPrototypeOf(a1).doSomething となります - この値は、定義した A.prototype と同じものです。 つまり、 Object.getPrototypeOf(a1).doSomething === Object.getPrototypeOf(a2).doSomething === A.prototype.doSomething と定義したことになります。

プロトタイプ継承モデルを使用する複雑なコードを書く前に、プロトタイプ継承モデルを理解することが重要です。また、コード中のプロトタイプチェーンの長さを意識し、パフォーマンスの問題を避けるために、必要に応じてそれを分割してください。さらに、ネイティブのプロトタイプは、新しい JavaScript の機能との互換性をとるためでない限り、決して拡張してはいけません。