prototypeと__proto__

Javaに慣れたからちょっと理解しづらかった

プロトタイプ

JavaScriptでは、全てのものがオブジェクト(またはそのインスタンス)である

そして、全てのオブジェクトはprototypeオブジェクトおよび__proto__プロパティを持っている

• __proto__: これはポインタみたいなプロパティである。どこかのprototypeを指している

• prototype: 子オブジェクトに継承させたいものをこの中に記述する。(インスタンスはこれを持たない)

  prototypeもオブジェクトなので、その中にも__proto__プロパティがある

プロトタイプチェーン

あるインスタンスから、メソッドを呼び出す時の話。

もしインスタンス自身にメソッドが見つからない場合、

そのインスタンスの__proto__プロパティから、どこかのprototypeに辿り、その中で探す。

それでもない場合、さらにそのprototype内の__proto__より、新たなprototypeに辿り着く。

こうやって繰り返して、最終的に__proto__ === nullとなり、undefinedが返される。

具体的な関係

Object.prototype.__proto__ === null

Object.__proto__ === Function.prototype

// 生成したインスタンスの__proto__
(new Object()).__proto__ === Object.prototype



Function.prototype.__proto__ === Object.prototype

Function.__proto__ === Function.prototype

// 生成したインスタンスの__proto__
(new Function()).__proto__ === Function.prototype



Array.prototype.__proto__ === Object.prototype

Array.__proto__ === Function.prototype

// 生成したインスタンスの__proto__
(new Array()).__proto__ === Array.prototype

自作コンストラクタで生成したインスタンス

例えば下のようなコンストラクタでインスタンスを生成したとする

function Person(name){
    this.name = name;
}
const person = new Person("yuki");

関係性は以下のようになる

person.__proto__ === Person.prototype
Person.prototype.constructor.__proto__ === Function.prototype
Person.prototype.constructor.prototype === Person.prototype

Object.create()で生成したインスタンス

Object.create()を使ってもインスタンスを生成できる

const anotherPerson = Object.create(person);

このとき、anotherPerson.__proto__が参照しているのは、personインスタンスとなる

つまり、personに何かを追加すれば、anotherPersonもそれを使える(anotherPerson.__proto__で探す)

Person.prototypeに追加して、anotherPersonでも使える(anotherPerson.__proto__.__proto__で探す)

=で生成したインスタンス

const person01 = person

Object.create()と違って、person01.__proto__ === person.__proto__ === Person.prototype

コンストラクタ

コンストラクタ関数の値は、prototype内のconstructorプロパティに保存されている

インスタンスからは、インスタンス.constructorでアクセスできる(実際はインスタンス.__proto__.constructor)

こういうことを利用して、インスタンスからコンストラクタを入手し、それで新しいインスタンスを生成できる

const person02 = new anotherPerson.constructor("abc");
person02.__proto__ === Person.prototype    // true

anotherPerson.__proto__が参照しているのは、personインスタンス

しかし、constructorというプロパティはanotherPersonにもpersonにもなく、

結局Person.prototypeまで探しに行ったので、person02.__proto__ === Person.prototypeがtrueとなる

constructor.name

インスタンス.constructor.nameで、コンストラクタ関数の関数名を取得できる

プロトタイプの変更

コンストラクタ関数のprototypeプロパティを変更すれば、

コンストラクタから作成されたすべてのオブジェクトインスタンスで使用可能になる

ただし、prototypeに追加した関数内部で、メンバのプロパティを利用したいなら、

thisキーワードを使う必要がある

参考記事

Object のプロトタイプ
図で理解するJavaScriptのプロトタイプチェーン
JavaScriptのプロトタイプチェーンを深堀りする
JavaScript のプロトタイプを理解する
JavaScriptのプロトタイプからオブジェクト指向を学ぶ