Usando super

Parte da seção Programação Orientada a Objetos do Journey de JavaScript da Coddy — lição 37 de 56.

Quando você sobrescreve um método, você ainda pode acessar a versão original da classe pai usando super.methodName(). Isso permite que você estenda ou modifique o comportamento do pai em vez de substituí-lo completamente.

Crie uma classe pai com um método:

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

Crie uma classe filha que estende a classe pai:

class Dog extends Animal {
  makeSound() {
    // Chama o método da classe pai primeiro
    const parentSound = super.makeSound();
    // Então estende com funcionalidade adicional
    return `${parentSound}, but also Woof!`;
  }
}

Crie uma instância da classe filha:

const myDog = new Dog();
console.log(myDog.makeSound());
// Saída: "Generic animal sound, but also Woof!"

A palavra-chave super permite que você chame os métodos da classe pai enquanto ainda adiciona sua própria funcionalidade na classe filha.

Desafio

Você recebeu uma classe Shape com um método calculateArea() e uma classe Rectangle que a estende. Sua tarefa é sobrescrever o método calculateArea() em Rectangle usando super.

Sua tarefa é completar o método calculateArea() na classe Rectangle para:

Chamar o método calculateArea() da classe pai usando super e armazenar o resultado
Calcular a área real do retângulo: width × height
Retornar uma string combinada: mensagem da classe pai + área do retângulo. Exemplo: Calculating area... Rectangle area: 50

Folha de consulta

Use super.methodName() para acessar o método original da classe pai ao sobrescrever:

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());
// Saída: "Generic animal sound, but also Woof!"

Isso permite que você estenda a funcionalidade da classe pai em vez de substituí-la completamente.

Experimente você mesmo

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

// Código de teste - não modificar
const rectangle = new Rectangle(5, 10);
console.log(rectangle.calculateArea()); // Esperado: "Calculating area... Rectangle area: 50"