Herencia, super y cuándo preferir la composición
Extienda una clase base con extends, llame a super en los constructores, sobrescriba métodos de forma segura y sepa cuándo es mejor una composición sencilla.
Herencia, super y cuándo preferir la composición es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 3 lecciones en total.
Panorama general
Objetivo: Usar la herencia básica sin confusiones.
- extends crea una clase hija
- super(...) llama al constructor de la clase padre
- sobrescriba un método; opcionalmente, llame a super.method()
- Si no se trata de una relación «is-a», prefiera la composición
extends + super
Cree una clase hija con extends; llame a super(name) para ejecutar el constructor de la clase padre y configurar this.
// Base class with a small field and method
class Animal {
constructor(name) {
this.name = name;
}
info() {
return "Animal:" + this.name;
}
}
// Child class extends the base and calls super(...)
class Dog extends Animal {
constructor(name, breed) {
// must call super() before using this
super(name);
this.breed = breed;
}
speak() {
return "woof";
}
}
const d = new Dog("Milo", "Beagle");
console.log(d.info(), d.speak());
Sobrescritura de métodos
Al sobrescribir un método, puede llamar a super.method() para reutilizar la lógica base y después añadir su modificación.
// Override a method; keep parent behavior with super.method()
class Button {
click() {
return "base-click";
}
}
class IconButton extends Button {
click() {
// call parent behavior, then add something
const base = super.click();
return base + "+icon";
}
}
const b = new IconButton();
console.log(b.click()); // "base-click+icon"
Prefiera la composición cuando sea has-a
Si la relación es has-a (usa una utilidad), prefiera la composición frente a la herencia para mantener las clases sencillas.
// Composition: use a helper object instead of extending
class Logger {
log(msg) {
console.log("[log]", msg);
}
}
class Player {
constructor(name, logger) {
this.name = name;
this.logger = logger; // has-a logger
}
score(points) {
this.logger.log(this.name + " +" + points);
}
}
const logger = new Logger();
const p = new Player("Ayla", logger);
p.score(5);
is-a frente a has-a
La herencia modela una relación is-a: un Dog es un Animal. La composición se utiliza para las utilidades has-a.
// Use instanceof for a quick is-a check
console.log("Dog is Animal?", d instanceof Animal);
console.log("Player is Animal?", p instanceof Animal);
Hábitos para principiantes
Consejos:
- Mantenga las jerarquías poco profundas para principiantes.
- Llame primero a super(...) en los constructores de las subclases.
- Sobrescriba solo lo necesario; reutilice la lógica con super.method().
- Prefiera la composición para utilidades y funcionalidades transversales.
Cuestionario sobre los fundamentos de super(...)
Comprobación rápida: super en el constructor de una subclase.
Resumen
Resumen: Use extends para relaciones realmente is-a, llame pronto a super(...), sobrescriba con cuidado (llame a super.method() cuando sea útil) y prefiera la composición para las utilidades.
Preguntas frecuentes
¿La lección «Herencia, super y cuándo preferir la composición» es gratis?
Sí — el texto completo de «Herencia, super y cuándo preferir la composición» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Herencia, super y cuándo preferir la composición»?
Extienda una clase base con extends, llame a super en los constructores, sobrescriba métodos de forma segura y sepa cuándo es mejor una composición sencilla. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 3.
¿Cuánto tiempo toma la lección «Herencia, super y cuándo preferir la composición»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Campos de clase, campos privados # y miembros static
- Herencia, super y cuándo preferir la composición
- Mixins (introducción): reutilización sencilla sin jerarquías profundas