El método super()

Parte de la sección Programación Orientada a Objetos del Journey de JavaScript de Coddy. Lección 27 de 56.

El método super() crea e inicializa el objeto utilizando el constructor de la clase principal. Debe llamarse antes de que puedas añadir propiedades a la clase hija.

Piénsalo de esta manera: la clase padre construye los cimientos del objeto, y super() dice "construye esos cimientos primero" antes de que la clase hija añada sus propias características.

Echemos un vistazo al ejemplo. Crea una clase padre:

class Employee {
  constructor(name) {
    this.name = name;
  }
}

Ahora crea una clase hija que extienda a la clase padre:

class Manager extends Employee {
  constructor(name, department) {
    super(name); // Llama al constructor padre con name
    this.department = department;
  }
}

Qué está ocurriendo aquí:

constructor(name, department) - Manager necesita tanto el nombre como el departamento
super(name) - Pasa name al constructor de Employee

this.department - Establece la propiedad única de Manager

¡Esto crea un Manager que tiene tanto propiedades heredadas (name) como sus propias propiedades (department)!

Crea una instancia de la clase hija:

const myManager = new Manager("Sarah", "Engineering");
console.log(myManager.name);      // "Sarah"
console.log(myManager.department); // "Engineering"

El método super() debe llamarse antes de usar this en el constructor de una clase derivada. Si no llamas a super(), JavaScript generará un error de referencia.

Desafío

Dada una clase Salad que extiende Meal. La ensalada debe tener tanto un nombre como ingredientes.

Tu tarea es completar el constructor de la clase Salad mediante:

Llamar a super() con la propiedad name
Establecer la propiedad ingredients

Pruébalo tú mismo

import { Meal } from './classes.js';
import { Salad } from './classes.js';

// Código de prueba - no modificar
const salad = new Salad("Caesar", ["lettuce", "croutons", "cheese"]);
console.log(salad.name);       // Debería mostrar "Caesar"
console.log(salad.ingredients); // Debería mostrar ["lettuce", "croutons", "cheese"]