Переопределение унаследованных методов

Часть раздела Объектно-ориентированное программирование путешествия по JavaScript на Coddy — урок 36 из 56.

Переопределение методов — это когда дочерний класс предоставляет свою собственную реализацию метода, который он унаследовал от родительского класса. Версия дочернего класса «переопределяет» (заменяет) версию родительского класса.

Простой пример:

Создайте родительский класс с методом:

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

Создайте дочерний класс, который расширяет родительский:

class Car extends Vehicle {
  // Это ПЕРЕОПРЕДЕЛЯЕТ метод start() класса Vehicle
  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. Родительский класс имеет метод calculateArea(), который возвращает 0.

Ваша задача — переопределить метод calculateArea() в классе Circle, чтобы вычислить фактическую площадь круга.

Формула площади круга: π × radius²
В JavaScript: Math.PI * this.radius * this.radius

Шпаргалка

Переопределение метода происходит, когда дочерний класс предоставляет собственную реализацию метода, унаследованного от родительского класса. Версия дочернего класса заменяет версию родительского.

Пример:

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

class Car extends Vehicle {
  // Переопределяет метод start() класса Vehicle
  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());