Использование super

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

Когда вы переопределяете метод, вы все еще можете получить доступ к оригинальной версии родителя, используя super.methodName(). Это позволяет вам расширять или изменять поведение родителя вместо того, чтобы полностью заменять его.

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

class Animal {
  makeSound() {
    return "Generic animal sound";
  }
}

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

class Dog extends Animal {
  makeSound() {
    // Сначала вызываем метод родителя
    const parentSound = super.makeSound();
    // Затем расширяем его дополнительной функциональностью
    return `${parentSound}, but also Woof!`;
  }
}

Создайте экземпляр дочернего класса:

const myDog = new Dog();
console.log(myDog.makeSound());
// Вывод: "Generic animal sound, but also Woof!"

Ключевое слово super позволяет вызывать методы родительского класса, при этом добавляя собственную функциональность в дочернем классе.

Задание

Вам дан класс Shape с методом calculateArea() и класс Rectangle, который его расширяет. Ваша задача — переопределить метод calculateArea() в классе Rectangle, используя super.

Ваша задача — завершить метод calculateArea() в классе Rectangle, чтобы:

Вызвать метод родителя calculateArea() с помощью super и сохранить результат
Вычислить фактическую площадь прямоугольника: width × height
Вернуть комбинированную строку: сообщение родителя + площадь прямоугольника. Пример: Calculating area... Rectangle area: 50

Шпаргалка

Используйте super.methodName() для доступа к оригинальному методу родительского класса при переопределении:

class Animal {
  makeSound() {
    return "Generic animal sound";
  }
}

class Dog extends Animal {
  makeSound() {
    const parentSound = super.makeSound();
    return `${parentSound}, but also Woof!`;
  }
}

const myDog = new Dog();
console.log(myDog.makeSound());
// Вывод: "Generic animal sound, but also Woof!"

Это позволяет расширять функциональность родителя вместо её полной замены.

Попробуйте сами

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

// Тестовый код — не изменять
const rectangle = new Rectangle(5, 10);
console.log(rectangle.calculateArea()); // Ожидается: "Calculating area... Rectangle area: 50"