継承

CoddyのJavaScriptジャーニー「オブジェクト指向プログラミング」セクションの一部 — レッスン 24/56。

JavaScriptのOOPにおける継承とは、あるクラスが別のクラスのすべてのプロパティやメソッドにアクセスできるようにするための仕組みです。

例を見てみましょう。親クラスを作成します：

class Vehicle {
 constructor(brand, model) {
   this.brand = brand;
   this.model = model;
 }
 drive() {
   console.log("Driving!");
 }
}

次に、Vehicleを継承する子クラスを作成します：

// CarはVehicleを継承します
class Car extends Vehicle {
 honk() {
   console.log("Beep beep!");
 }
}

子クラスのインスタンスを作成します：

const myCar = new Car("Toyota", "Camry");

プロパティとメソッドにアクセスする:

console.log(myCar.brand);  // "Toyota" - Vehicleから継承
console.log(myCar.model);  // "Camry" - Vehicleから継承
// CarはVehicleのメソッドにアクセスできます
myCar.drive();  // "Driving!" - Vehicleから継承
// Carは独自のメソッドも持っています
myCar.honk();   // "Beep beep!" - Car固有のメソッド

チャレンジ

Animalクラスと、それを継承したDogクラスが与えられています。あなたのタスクは、名前が "Buddy" で年齢が 3 の myDog オブジェクトを作成することです。

チートシート

継承を使用すると、extendsキーワードを使用して、あるクラスが別のクラスのプロパティやメソッドにアクセスできるようになります。

親クラス:

class Vehicle {
 constructor(brand, model) {
   this.brand = brand;
   this.model = model;
 }
 drive() {
   console.log("Driving!");
 }
}

親から継承した子クラス:

class Car extends Vehicle {
 honk() {
   console.log("Beep beep!");
 }
}

子クラスは親クラスからすべてのプロパティとメソッドを継承し、独自のプロパティやメソッドを持つこともできます。

const myCar = new Car("Toyota", "Camry");
console.log(myCar.brand);  // "Toyota" - 継承されたもの
myCar.drive();  // "Driving!" - 継承されたもの
myCar.honk();   // "Beep beep!" - 独自のメソッド

自分で試してみよう

import { Dog } from './animal.js';

// TODO: 名前が "Buddy" で年齢が 3 の myDog オブジェクトを作成してください。


// テストコード - 変更しないでください
console.log(myDog.name);  // "Buddy" と出力されるはずです
console.log(myDog.age);  // 3 と出力されるはずです