【JavaScript ECMAScript】ReferenceError: must call super constructor before using 'this' in derived class constructorエラーの使い方

ReferenceError: must call super constructor before using 'this' in derived class constructorオブジェクトは、JavaScriptのクラス継承において、派生クラス（子クラス）のコンストラクタ内でthisキーワードを使用する前に、基底クラス（親クラス）のコンストラクタを呼び出すためのsuper()を忘れた場合に発生するエラーを表すオブジェクトです。このエラーは、オブジェクト指向プログラミングにおけるクラスの正しい初期化順序を保証するために非常に重要です。

JavaScriptでは、あるクラスが別のクラスを継承する場合、子クラスのコンストラクタが実行される前に、必ず親クラスのコンストラクタが実行される必要があります。親クラスのコンストラクタは、super()という特別な関数を通じて呼び出されます。このsuper()の呼び出しは、thisが参照するオブジェクトの基盤となる部分を初期化し、親クラスで定義されたプロパティなどを設定する役割を担っています。もしsuper()が呼び出される前に子クラスのコンストラクタ内でthisを使用しようとすると、thisが指し示すオブジェクトがまだ完全に初期化されていない状態であるため、このReferenceErrorが発生します。これにより、未定義の動作やプロパティへの不適切なアクセスを防ぎ、プログラムの安定性を保ちます。

このエラーを解消するには、子クラスのコンストラクタの先頭で、いかなるthisの使用よりも前にsuper()を呼び出す必要があります。super()は引数を取ることができ、それらの引数は親クラスのコンストラクタに渡されます。super()が正常に実行された後であれば、子クラスのコンストラクタ内で安全にthisを使用して、子クラス独自のプロパティを初期化したり、メソッドを呼び出したりすることが可能です。これにより、親クラスと子クラスの初期化が適切に行われ、健全なオブジェクトのインスタンスが作成されます。

Copy
1class Parent {
2  constructor(value) {
3    this.parentValue = value;
4  }
5}
6
7class Child extends Parent {
8  constructor(value, additionalValue) {
9    this.childValue = additionalValue; // ReferenceError: super() を呼び出す前に 'this' を使用しています
10    super(value);
11  }
12}

引数なし

引数はありません

戻り値なし

戻り値はありません