JavaScript | クラスを継承して super 呼び出しの挙動を比較（アロー関数 vs 通常メソッド）

クラス継承における super 呼び出し は、アロー関数と通常メソッドで挙動が大きく変わります。

基本ルール

• 通常メソッド
  • クラスのプロトタイプに登録される。
  • super を使って親クラスのメソッドを呼び出せる。
• アロー関数
  • インスタンスのプロパティとして定義される。
  • super は使えない（構文エラーになる）。

例：通常メソッドでの super

class Parent {
  greet() {
    console.log("Hello from Parent");
  }
}

class Child extends Parent {
  greet() {
    super.greet(); // 親クラスの greet を呼び出せる
    console.log("Hello from Child");
  }
}

const c = new Child();
c.greet();
// 出力:
// Hello from Parent
// Hello from Child

class Parent {
  greet() {
    console.log("Hello from Parent");
  }
}

class Child extends Parent {
  greet() {
    super.greet(); // 親クラスの greet を呼び出せる
    console.log("Hello from Child");
  }
}

const c = new Child();
c.greet();
// 出力:
// Hello from Parent
// Hello from Child

✅ 通常メソッドでは super が有効。親クラスの処理を拡張できる。

例：アロー関数での super

class Parent {
  greet() {
    console.log("Hello from Parent");
  }
}

class Child extends Parent {
  // アロー関数で定義
  greet = () => {
    super.greet(); // ❌ SyntaxError: 'super' keyword unexpected here
    console.log("Hello from Child");
  };
}

class Parent {
  greet() {
    console.log("Hello from Parent");
  }
}

class Child extends Parent {
  // アロー関数で定義
  greet = () => {
    super.greet(); // ❌ SyntaxError: 'super' keyword unexpected here
    console.log("Hello from Child");
  };
}

❌ アロー関数では super が使えないため、親クラスのメソッドを呼び出せません。

なぜ違うのか？

• 通常メソッド
  • クラス構文の「メソッド定義」として扱われるため、super が有効になる。
• アロー関数
  • 実際には「インスタンスプロパティに関数を代入」しているだけ。
  • そのため super の解決スコープを持たず、構文エラーになる。

✅ まとめ

• 親クラスのメソッドを拡張したい → 通常メソッドを使う
• イベントハンドラやコールバックで this を固定したい → アロー関数を使う
• アロー関数では super が使えないので、継承関係で親メソッドを呼びたい場合は必ず通常メソッドにする。

👉 実務的には、

• 共通処理やオーバーライド → 通常メソッド（superが必要だから）
• イベントハンドラやコールバック → アロー関数（this固定が便利だから）

と使い分けるのがベストです。