Herencia de clases
TeaOrder aprovecha el trabajo de Order: conserva bebida y tamaño, y suma el detalle extra para el té.
Ya no hablamos de cookies
La página anterior mostraba theme / dark. Aquí se crean objetos en memoria; no se guarda texto en el navegador.
La base común
Order recibe drink y size. Su método label forma la etiqueta que comparten todos los pedidos.
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
const order = new Order("tea", "regular");
console.log(order.label());
La consola muestra tea / regular. Además, order instanceof Order es verdadero y el método vive en el prototype.
El hijo empieza por super
extends Order enlaza ambas clases. Antes de tocar el estado propio, el constructor hijo prepara la parte heredada.
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
}
const tea = new TeaOrder("tea", "regular", "mint");
console.log(tea.drink);
console.log(tea.extra);
Se registran tea y mint. Si se usa this.extra antes de super, JavaScript lanza ReferenceError.
Cambiar sin duplicar
TeaOrder puede redefinir label; con super.label() recupera la etiqueta base y solo añade su ingrediente.
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
label() {
return super.label() + " / " + this.extra;
}
}
console.log(new TeaOrder("tea", "regular", "mint").label());
El resultado es tea / regular / mint. El mismo objeto pasa tanto instanceof TeaOrder como instanceof Order.
Responsabilidades claras
Order describe lo que comparten los pedidos; TeaOrder guarda solo lo especial del té. No conviene heredar para renombrar una cosa.
Texto de la página
El ejemplo crea un TeaOrder y escribe el valor de su método redefinido.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
label() {
return super.label() + " / " + this.extra;
}
}
document.querySelector("#line").textContent =
new TeaOrder("tea", "regular", "mint").label();
</script>
</body>
</html>
La página lee tea / regular / mint. theme / dark era de cookies, y tea / regular era la versión sin extra.
Practica el flujo
Crea un Order y un TeaOrder con mint. Coloca super antes de this.extra y reutiliza super.label().
Fallos frecuentes
No uses this demasiado pronto, no reescribas toda la etiqueta del padre y recuerda la doble pertenencia del hijo.
Idea final
extends conecta clases; super(...) construye la base; una redefinición puede ampliar el resultado heredado.
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior