Herencia

Parte de la sección Programación Orientada a Objetos del Journey de JavaScript de Coddy — lección 24 de 56.

La herencia en la POO de JavaScript es una forma de que una clase obtenga acceso a todas las propiedades y métodos de otra clase.

Veamos un ejemplo. Crea una clase padre:

class Vehicle {
 constructor(brand, model) {
   this.brand = brand;
   this.model = model;
 }
 drive() {
   console.log("Driving!");
 }
}

Ahora crea una clase hija que herede de Vehicle:

// Car hereda de Vehicle
class Car extends Vehicle {
 honk() {
   console.log("Beep beep!");
 }
}

Crea una instancia de la clase hija:

const myCar = new Car("Toyota", "Camry");

Acceder a propiedades y métodos:

console.log(myCar.brand);  // "Toyota" - heredado de Vehicle
console.log(myCar.model);  // "Camry" - heredado de Vehicle
// Car puede acceder a los métodos de Vehicle
myCar.drive();  // "Driving!" - heredado de Vehicle
// Car también tiene sus propios métodos
myCar.honk();   // "Beep beep!" - específico de Car

Desafío

Se te proporciona una clase Animal y una clase Dog que hereda de ella. Tu tarea es crear un objeto myDog con el nombre "Buddy" y la edad 3.

Hoja de referencia

La herencia permite que una clase obtenga acceso a las propiedades y métodos de otra clase utilizando la palabra clave extends.

Clase padre:

class Vehicle {
 constructor(brand, model) {
   this.brand = brand;
   this.model = model;
 }
 drive() {
   console.log("Driving!");
 }
}

Clase hija que hereda del padre:

class Car extends Vehicle {
 honk() {
   console.log("Beep beep!");
 }
}

La clase hija hereda todas las propiedades y métodos de la clase padre y también puede tener los suyos propios:

const myCar = new Car("Toyota", "Camry");
console.log(myCar.brand);  // "Toyota" - heredado
myCar.drive();  // "Driving!" - heredado
myCar.honk();   // "Beep beep!" - método propio

Pruébalo tú mismo

import { Dog } from './animal.js';

// TODO: Crear el objeto myDog con el nombre "Buddy" y la edad 3.


// Código de prueba - no modificar
console.log(myDog.name);  // Debería mostrar "Buddy"
console.log(myDog.age);  // Debería mostrar 3