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を指す。