javascript エラー「Uncaught ReferenceError: Must call super constructor in derived class before accessing ‘this’ or returning from derived constructor」の解決方法

javascript エラー「Uncaught ReferenceError: Must call super constructor in derived class before accessing ‘this’ or returning from derived constructor」の解決方法

javascriptで、エラー「Uncaught ReferenceError: Must call super constructor in derived class before accessing ‘this’ or returning from derived constructor」が発生した場合の原因と解決方法を記述してます。

環境

  • OS windows11 pro 64bit
  • ブラウザ chrome 103.0.5060.134

エラー内容

以下の、クラスのコンストラクタをオーバーライドした以下のコードを実行時に発生。

class Oya {

    constructor( num ) {
        this._num = num;
    }

}

class Ko extends Oya {

    constructor( num, str ) {        
        this._num = num;
        this._str = str;
    }

    disp() {
        return this._str
    }

}

const ko = new Ko( 100, "hello world!!" );

console.log( ko.disp() );

エラーメッセージ

Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

画像

firefox102の場合は、以下のエラーが発生します。

Uncaught ReferenceError: must call super constructor before using 'this' in derived class constructor

画像

原因

コンストラクタをオーバーライドする場合は、親クラスのコンストラクタを呼び出す「super()」を使用する必要があるため

解決方法

「super()」を使用する

class Oya {

    constructor( num ) {
        this._num = num;
    }

}

class Ko extends Oya {

    constructor( num, str ) {
        super();
        this._num = num;
        this._str = str;
    }

    disp() {
        return this._str
    }

}

const ko = new Ko( 100, "hello world!!" );

console.log( ko.disp() ); // hello world!!