JavaScript | クラス継承でアロー関数を使うときの実務的な注意点

class Animal {
  constructor(name) {
    this.name = name;
  }

  // ✅ 通常メソッド（親クラスの基本動作）
  speak() {
    console.log(`${this.name} が鳴いた`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // 親クラスのコンストラクタ呼び出し
  }

  // ✅ 通常メソッド（superを使って親の処理を拡張）
  speak() {
    super.speak(); // 親の speak を呼ぶ
    console.log("ワン！");
  }

  // ✅ アロー関数（イベントハンドラやコールバック用）
  bark = () => {
    console.log(`${this.name} が元気にワンワン！`);
  };
}

// --- 動作確認 ---
const d = new Dog("ポチ");
d.speak(); // 親と子の両方の処理が実行される
// 出力:
// ポチ が鳴いた
// ワン！

// コールバックに渡しても this が壊れない
setTimeout(d.bark, 1000);
// 1秒後: ポチ が元気にワンワン！

class Animal {
  constructor(name) {
    this.name = name;
  }

  // ✅ 通常メソッド（親クラスの基本動作）
  speak() {
    console.log(`${this.name} が鳴いた`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // 親クラスのコンストラクタ呼び出し
  }

  // ✅ 通常メソッド（superを使って親の処理を拡張）
  speak() {
    super.speak(); // 親の speak を呼ぶ
    console.log("ワン！");
  }

  // ✅ アロー関数（イベントハンドラやコールバック用）
  bark = () => {
    console.log(`${this.name} が元気にワンワン！`);
  };
}

// --- 動作確認 ---
const d = new Dog("ポチ");
d.speak(); // 親と子の両方の処理が実行される
// 出力:
// ポチ が鳴いた
// ワン！

// コールバックに渡しても this が壊れない
setTimeout(d.bark, 1000);
// 1秒後: ポチ が元気にワンワン！