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 padre. Debe ser llamado antes de que puedas añadir cualquier propiedad 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á pasando 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 ser llamado antes de usar this en el constructor de una clase derivada. Si no llamas a super(), JavaScript lanzará un error de referencia.

Desafío

Dada una clase Salad que extiende a Meal. La Salad debe tener tanto un name como ingredients.

Tu tarea es completar el constructor de la clase Salad haciendo lo siguiente:

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

Hoja de referencia

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

Ejemplo de uso de super() en una clase hija:

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

class Manager extends Employee {
  constructor(name, department) {
    super(name); // Llamar primero al constructor de la clase madre
    this.department = department; // Luego añadir las propiedades de la clase hija
  }
}

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

Puntos clave:

super() debe llamarse antes de usar this en el constructor de la clase hija
Pasa los argumentos necesarios de la clase hija al constructor de la clase madre
JavaScript lanzará un error de referencia si no se llama a super()

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"]