Lección 47: Herencia con Clases (extends)

🧠 Concepto

La herencia permite crear una clase “hija” que hereda propiedades y métodos de una clase “padre”. En JavaScript se usa la palabra clave extends.

Sintaxis básica

class Animal {
  constructor(nombre) {
    this.nombre = nombre;
  }

  respirar() {
    return `${this.nombre} está respirando`;
  }
}

class Perro extends Animal {
  constructor(nombre, raza) {
    super(nombre); // Llama al constructor del padre
    this.raza = raza;
  }

  ladrar() {
    return `${this.nombre} dice: ¡Guau!`;
  }
}

const perro = new Perro('Rex', 'Pastor Alemán');
console.log(perro.respirar()); // "Rex está respirando" (heredado)
console.log(perro.ladrar());   // "Rex dice: ¡Guau!" (propio)
console.log(perro.raza);       // "Pastor Alemán"

super()

• super() llama al constructor del padre (debe ser lo primero en el constructor hijo)
• super.metodo() llama un método del padre desde el hijo

class Gato extends Animal {
  constructor(nombre, color) {
    super(nombre);
    this.color = color;
  }

  // Sobrescribir método
  respirar() {
    return `${super.respirar()} y ronronea`;
  }

  maullar() {
    return `${this.nombre} dice: ¡Miau!`;
  }
}

const gato = new Gato('Bigotes', 'naranja');
console.log(gato.respirar()); // "Bigotes está respirando y ronronea"
console.log(gato.maullar());  // "Bigotes dice: ¡Miau!"

💻 Ejemplo

// Jerarquía de clases
class Vehiculo {
  constructor(marca, modelo) {
    this.marca = marca;
    this.modelo = modelo;
    this.encendido = false;
  }

  encender() {
    this.encendido = true;
    return `${this.marca} ${this.modelo} encendido`;
  }

  apagar() {
    this.encendido = false;
    return `${this.marca} ${this.modelo} apagado`;
  }

  descripcion() {
    return `${this.marca} ${this.modelo}`;
  }
}

class Coche extends Vehiculo {
  constructor(marca, modelo, puertas) {
    super(marca, modelo);
    this.puertas = puertas;
  }

  descripcion() {
    return `${super.descripcion()} (${this.puertas} puertas)`;
  }
}

class Moto extends Vehiculo {
  constructor(marca, modelo, tipo) {
    super(marca, modelo);
    this.tipo = tipo;
  }

  hacerCaballito() {
    if (this.encendido) {
      return `${this.marca} haciendo caballito 🏍️`;
    }
    return 'Primero enciende la moto';
  }
}

const coche = new Coche('Toyota', 'Corolla', 4);
console.log(coche.descripcion()); // "Toyota Corolla (4 puertas)"
console.log(coche.encender());    // "Toyota Corolla encendido"

const moto = new Moto('Yamaha', 'MT-07', 'naked');
console.log(moto.hacerCaballito()); // "Primero enciende la moto"
moto.encender();
console.log(moto.hacerCaballito()); // "Yamaha haciendo caballito 🏍️"

⚠️ Nota

Si no llamas a super() en el constructor de la clase hija, JavaScript lanza un error. Siempre debe ser la primera línea del constructor:

class Hija extends Madre {
  constructor() {
    // this.algo = 1; // Error: Must call super constructor
    super();
    this.algo = 1; // Correcto
  }
}

No puedes usar this antes de llamar a super() en el constructor.

La herencia en JavaScript sigue siendo prototípica por debajo. extends crea la cadena de prototipos automáticamente:

console.log(gato instanceof Gato);   // true
console.log(gato instanceof Animal); // true
console.log(gato instanceof Object); // true

🎯 Tip

La herencia es útil para modelar relaciones “es-un” (un Perro es un Animal). Pero no abuses de la herencia profunda (más de 2 o 3 niveles). Prefiere composición sobre herencia cuando la relación es “tiene-un” (un Coche tiene un Motor).

// Composición sobre herencia
class Motor {
  encender() { return 'Motor encendido'; }
}

class Coche {
  constructor(marca, modelo) {
    this.marca = marca;
    this.modelo = modelo;
    this.motor = new Motor(); // Composición
  }
}

📝 Ejercicio

Crea una jerarquía de clases:

• Empleado: propiedades nombre, salario. Método trabajar().
• Desarrollador (hereda de Empleado): propiedad lenguaje. Sobrescribe trabajar().
• Diseñador (hereda de Empleado): propiedad herramienta. Sobrescribe trabajar().

class Empleado {
  constructor(nombre, salario) {
    this.nombre = nombre;
    this.salario = salario;
  }

  trabajar() {
    return `${this.nombre} está trabajando`;
  }
}

// Crea Desarrollador que extiende Empleado
// Crea Diseñador que extiende Empleado

const dev = new Desarrollador('Ana', 50000, 'JavaScript');
const designer = new Diseñador('Luis', 45000, 'Figma');

console.log(dev.trabajar());    // "Ana está programando en JavaScript"
console.log(designer.trabajar()); // "Luis está diseñando con Figma"