Uso de super

Parte de la sección Programación Orientada a Objetos del Journey de JavaScript de Coddy — lección 37 de 56.

Cuando sobrescribes un método, aún puedes acceder a la versión original del padre usando super.methodName(). Esto te permite extender o modificar el comportamiento del padre en lugar de reemplazarlo por completo.

Crea una clase padre con un método:

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

Crea una clase hija que extienda a la clase padre:

class Dog extends Animal {
  makeSound() {
    // Llama primero al método del padre
    const parentSound = super.makeSound();
    // Luego extiéndelo con funcionalidad adicional
    return `${parentSound}, but also Woof!`;
  }
}

Crea una instancia de la clase hija:

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

La palabra clave super te permite llamar a los métodos de la clase padre mientras sigues añadiendo tu propia funcionalidad en la clase hija.

Desafío

Se te proporciona una clase Shape con un método calculateArea() y una clase Rectangle que la extiende. Tu tarea es sobrescribir el método calculateArea() en Rectangle utilizando super.

Tu tarea es completar el método calculateArea() en la clase Rectangle para:

Llamar al método calculateArea() del padre usando super y almacenar el resultado
Calcular el área real del rectángulo: width × height
Devolver una cadena combinada: el mensaje del padre + el área del rectángulo. Ejemplo: Calculating area... Rectangle area: 50

Hoja de referencia

Utiliza super.methodName() para acceder al método original de la clase padre al sobrescribir:

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

Esto te permite extender la funcionalidad del padre en lugar de reemplazarla por completo.

Pruébalo tú mismo

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

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