JavaScript | classの継承(extends)

JavaScript JavaScript
スポンサーリンク

では「classの継承(extends)」について見ていきましょう。これを理解すると、オブジェクト指向の「再利用」と「拡張」ができるようになります。


継承とは?

  • あるクラスをもとにして、新しいクラスを作る仕組み
  • 共通の機能は親クラスにまとめ、子クラスはそれを引き継ぎつつ独自の機能を追加できる

👉 「親クラス(スーパークラス)」を extends で「子クラス(サブクラス)」が継承する


例題:動物クラスを継承する

親クラス(Animal)

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

  speak(){
    console.log(`${this.name}が鳴いた!`);
  }
}
JavaScript

子クラス(Dog)

class Dog extends Animal {
  constructor(name, breed){
    super(name); // 親クラスのconstructorを呼び出す
    this.breed = breed;
  }

  bark(){
    console.log(`${this.name}${this.breed})がワンワン!と吠えた`);
  }
}
JavaScript

実行

let pochi = new Dog("ポチ", "柴犬");

pochi.speak(); // → ポチが鳴いた!(親クラスのメソッド)
pochi.bark();  // → ポチ(柴犬)がワンワン!と吠えた(子クラス独自のメソッド)
JavaScript

🔑 ポイント

  • extends で親クラスを継承できる
  • super() で親クラスのコンストラクタを呼び出す
  • 親クラスのメソッドをそのまま使える
  • 子クラスで同じ名前のメソッドを定義すると「オーバーライド(上書き)」できる

例題:オーバーライド

class Cat extends Animal {
  speak(){
    console.log(`${this.name}がニャーと鳴いた!`);
  }
}

let tama = new Cat("タマ");
tama.speak(); // → タマがニャーと鳴いた!(親のメソッドを上書き)
JavaScript

✅ まとめ

  • classの継承は「共通部分を親にまとめ、子で拡張する」仕組み
  • extends で継承、super() で親の処理を呼び出す
  • 子クラスは親の機能をそのまま使ったり、オーバーライドで上書きしたりできる

💡 初心者へのおすすめ理解法:

  • 「親クラス=共通の設計図」
  • 「子クラス=親をベースにしたカスタマイズ版」
タイトルとURLをコピーしました