JavaScript

JavaScriptのclassによるprototypeチェーン図解


Classの仕組みの図解

classによって生成されるPrototypeチェーンを図解します。

対象読者は既にprototypチェーンについて学習したことがある人です。

そもそもの説明はこちらなどが参考になります


classAを生成


class A {
constructor (){
thits.a = "a";
}
}

上記のコードによって以下のような関係が生成されます。

image.png


Aを継承したclassBを生成

class B extends A {

constructor (){
super();
}
}

Aを継承したBを生成すると以下のようになります。

image.png


instance b を生成

b = new B();

instance b を生成すると以下のようになります。

image.png

.__proto__, .__proto__ で繋がっていく部分がプロトタイプチェーンです。

最終的にObject.prototypeにつながるので、bはObject.prototypeに定義されている全てのメソッドにアクセスできます。


classを使わずprototypeで記述する場合

classを使った上の記述は以下のprototypeを使ったコードとほぼ同義となります。

function A(){

this.a = "a";
}

function B(){
this.a = "a";
}
B.prototype.__proto__ = A.prototype;
b = new B();