javascriptのprototypeについて

prototypeは、javascriptの中でも理解しにくい概念でもあるが、実はjavasciptを理解するための重要な概念でもある。

prototypeを理解することで、javascriptの仕組みを理解することができる。

基本的なprototypeとproto

以下はjavascriptのprototypeの概念を図にしたものである。
開発者がPersonというクラスを定義すると、内部ではPersonとPerson's prototypeのobjが生成される。この二つのobjはお互いに関連することを示すためprototypeとconstructorを持って相互参照する。

constructorは、personが何によって作られたのかを示すもの。Person’ prototypeはPersonによって作られたことを示すため、constructorは内部的にPersonを参照する。

new キーワードをもってPersonを生成すると、person1の内部には__proto__が自動生成される。そして、__proto__はperson1の原型（Person）を示すprototypeを参照する。

つまり

簡単に説明はしたものの、これで理解できる人はあんまりないだろう。
結果的には何がどうなったのかを説明すると以下のことができるという意味である。

protoとclassのprototypeは以下の関係である。

person1.__proto__ === Person.prototype //true

表現を変えると以下のようにもできる

person1.__proto__.constructor === Person //true

protoのconstructorがPersonクラスそのものを指すので以下のこともできる。

const person2 = new person1.__proto__.constructor()
person2.__proto__ === Person.prototype //true

Classとprototypeでのconstructorの違い

Classでのconstructorは、インスタンスの生成時に初期化するためのもの。ここでのthisはnewでインスタンスを生成する際にClassを指し、constructorで記載した変数は、インスタンスを生成時にセットされ、変数に代入される。

ptorotypeでのconstructorは、prototypeの元となるClassを指す。