継承したメソッドのオーバーライド

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

メソッドのオーバーライドとは、子クラスが親クラスから継承したメソッドに対して、独自の定義（実装）を提供することです。子クラス側のバージョンが親クラス側のバージョンを「オーバーライド」（上書き）します。

簡単な例:

メソッドを持つ親クラスを作成します：

class Vehicle {
  start() {
    return "Vehicle starting...";
  }
}

親クラスを継承する子クラスを作成します：

class Car extends Vehicle {
  // これは Vehicle の start() メソッドをオーバーライドします
  start() {
    return "Car engine roaring to life!";
  }
}

クラスを使用します：

const vehicle = new Vehicle();
const car = new Car();

console.log(vehicle.start());      // "Vehicle starting..." (オリジナル)
console.log(car.start());          // "Car engine roaring to life!" (オーバーライド済み)

オーバーライドの重要なルール:

親と同じメソッド名

同一または互換性のあるパラメータ

子のバージョンが呼び出される（子オブジェクトに対して）

特別なキーワードは不要です - メソッドを定義するだけです

チャレンジ

Shape 親クラスと Circle 子クラスが与えられています。親クラスには、0 を返す calculateArea() メソッドがあります。

あなたのタスクは、Circle クラスの calculateArea() メソッドをオーバーライドして、円の実際の面積を計算することです。

円の面積の公式は次のとおりです： π × radius²
JavaScript では： Math.PI * this.radius * this.radius

チートシート

メソッドのオーバーライドは、子クラスが親クラスから継承したメソッドに対して独自の定義を提供したときに発生します。子クラスのバージョンが親クラスのバージョンを置き換えます。

例:

class Vehicle {
  start() {
    return "Vehicle starting...";
  }
}

class Car extends Vehicle {
  // Vehicleのstart()メソッドをオーバーライドします
  start() {
    return "Car engine roaring to life!";
  }
}

const vehicle = new Vehicle();
const car = new Car();

console.log(vehicle.start());  // "Vehicle starting..."
console.log(car.start());      // "Car engine roaring to life!"

主なルール:

親クラスと同じメソッド名を使用する
同じ、または互換性のあるパラメータを使用する
子クラスのオブジェクトでは子クラスのバージョンが呼び出される
特別なキーワードは不要 - 子クラスでメソッドを定義するだけ

自分で試してみよう

import { Shape } from './shapes.js';
import { Circle } from './shapes.js';

// 実装をテストする
const myCircle = new Circle(5);
console.log(myCircle.calculateArea());