Aprende Comprensión de la Herencia con extends y super() | Dominio de las Clases e Herencia en JavaScript

¿Qué es la herencia de clases?

JavaScript utiliza la palabra clave extends para establecer esta relación entre clases. Una clase hija puede agregar sus propias propiedades y métodos o sobrescribir los del padre.

Considere una clase hija como una versión especializada de la clase padre. Si la clase padre es un plano para un automóvil, la clase hija podría representar un tipo específico de automóvil, como un coche eléctrico. El coche eléctrico hereda la funcionalidad básica (ruedas, dirección) pero puede agregar o modificar características (batería, sistema de carga).

Cómo usar la palabra clave extends

La palabra clave extends se utiliza para hacer que una clase herede de otra clase. La clase hija hereda todas las propiedades y métodos de la clase padre.


              1234567891011121314151617181920
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class extending the Animal class
class Dog extends Animal {
  bark() {
    console.log(`${this.name} barks!`);
  }
}

const dog = new Dog('Rex');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex barks!

En este ejemplo, la clase Dog extiende la clase Animal, heredando el método makeSound() de la clase padre. La clase Dog también añade su propio método bark().

Trabajo con el constructor en una clase hija

Al crear una clase hija, a menudo es necesario inicializar tanto sus propias propiedades como las de la clase padre. Esto se realiza mediante el método constructor. Sin embargo, para asegurar que la clase padre se inicialice correctamente, se debe utilizar la función super() para llamar al constructor de la clase padre.

Importante: Cuando una clase hija tiene un constructor, debe llamar a super() antes de acceder a this, de lo contrario ocurrirá un error.

Uso de super() para llamar al constructor de la clase padre

La función super() se utiliza para llamar al constructor de la clase padre desde el constructor de la clase hija. Esto garantiza que cualquier propiedad o lógica definida en el constructor de la clase padre se inicialice correctamente antes de añadir nueva funcionalidad en la clase hija.


              1234567891011121314151617181920212223242526
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class with its own constructor
class Dog extends Animal {
  constructor(name, breed) {
    // Call the parent class constructor using super()
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name}, the ${this.breed}, barks!`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex, the German Shepherd, barks!

En este ejemplo, tenemos una clase base llamada Animal con un constructor que inicializa la propiedad name y un método makeSound que muestra un mensaje genérico de sonido. La clase Dog extiende a Animal, añadiendo su propio constructor que acepta tanto name como breed como argumentos. Dentro del constructor de Dog, la función super() se utiliza para llamar al constructor de la clase padre, asegurando que name se establezca correctamente. Además, Dog introduce un nuevo método, bark, que muestra un mensaje específico para la raza del perro. Cuando creamos una nueva instancia de Dog llamada Rex de la raza German Shepherd, podemos llamar tanto a makeSound como a bark, demostrando el comportamiento heredado y el nuevo.

Puntos clave al usar extends y super()

Herencia: La palabra clave extends permite que la clase hija herede propiedades y métodos de la clase padre.

Constructor en la clase hija: Al definir un constructor en la clase hija, siempre se debe usar super() para llamar al constructor de la clase padre.

Acceso a this: Es obligatorio llamar a super() antes de acceder a this en el constructor de la clase hija.

Sobrescritura de métodos: Es posible sobrescribir métodos de la clase padre en la clase hija definiendo un método con el mismo nombre. También se puede utilizar super.methodName() para llamar al método de la clase padre desde la clase hija si es necesario.

Ejemplo: Sobrescritura de Métodos y Uso de super()

En ocasiones, es necesario sobrescribir un método de la clase padre en la clase hija, pero también llamar al método de la clase padre como parte de la nueva lógica. Esto se puede lograr utilizando super.methodName().


              1234567891011121314151617181920212223242526272829
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a generic sound.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  // Override the makeSound method
  makeSound() {
    // Call the parent class's makeSound method
    super.makeSound();
    console.log(`${this.name}, the ${this.breed}, barks loudly.`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound();
// Output:
// Rex makes a generic sound.
// Rex, the German Shepherd, barks loudly.

En este ejemplo, la clase Dog sobrescribe el método makeSound, pero aún así llama al método makeSound de la clase padre utilizando super.makeSound(). Esto permite que la clase hija amplíe el comportamiento de la clase padre sin reemplazarlo por completo.

Ejemplo del mundo real: Clases Employee y Manager

Consideremos un escenario donde tenemos una clase Employee y una clase Manager que la extiende. La clase Manager agrega nueva funcionalidad sobre la funcionalidad base de Employee.


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

  getDetails() {
    return `${this.name} works as a ${this.position}.`;
  }
}

class Manager extends Employee {
  constructor(name, position, department) {
    // Call the parent class constructor using super()
    super(name, position);
    this.department = department;
  }

  getDetails() {
    return `${super.getDetails()} They manage the ${
      this.department
    } department.`;
  }
}

const manager = new Manager('Alice', 'Manager', 'Sales');
console.log(manager.getDetails());
// Output: Alice works as a Manager. They manage the Sales department.

En este ejemplo, la clase Manager extiende la clase Employee, agregando una nueva propiedad department. El método getDetails() en la clase Manager llama al método de la clase padre usando super.getDetails() y luego añade su propia información específica del departamento.

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 1. Capítulo 14

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you explain more about how method overriding works in JavaScript?

What happens if I forget to call super() in the child class constructor?

Can you give more real-world examples of class inheritance?

Awesome!

Completion rate improved to 2.22

Desliza para mostrar el menú

¿Qué es la herencia de clases?

JavaScript utiliza la palabra clave extends para establecer esta relación entre clases. Una clase hija puede agregar sus propias propiedades y métodos o sobrescribir los del padre.

Cómo usar la palabra clave extends

La palabra clave extends se utiliza para hacer que una clase herede de otra clase. La clase hija hereda todas las propiedades y métodos de la clase padre.


              1234567891011121314151617181920
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class extending the Animal class
class Dog extends Animal {
  bark() {
    console.log(`${this.name} barks!`);
  }
}

const dog = new Dog('Rex');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex barks!

En este ejemplo, la clase Dog extiende la clase Animal, heredando el método makeSound() de la clase padre. La clase Dog también añade su propio método bark().

Trabajo con el constructor en una clase hija

Importante: Cuando una clase hija tiene un constructor, debe llamar a super() antes de acceder a this, de lo contrario ocurrirá un error.

Uso de super() para llamar al constructor de la clase padre


              1234567891011121314151617181920212223242526
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class with its own constructor
class Dog extends Animal {
  constructor(name, breed) {
    // Call the parent class constructor using super()
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name}, the ${this.breed}, barks!`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex, the German Shepherd, barks!

Puntos clave al usar extends y super()

Herencia: La palabra clave extends permite que la clase hija herede propiedades y métodos de la clase padre.

Constructor en la clase hija: Al definir un constructor en la clase hija, siempre se debe usar super() para llamar al constructor de la clase padre.

Acceso a this: Es obligatorio llamar a super() antes de acceder a this en el constructor de la clase hija.

Ejemplo: Sobrescritura de Métodos y Uso de super()


              1234567891011121314151617181920212223242526272829
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a generic sound.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  // Override the makeSound method
  makeSound() {
    // Call the parent class's makeSound method
    super.makeSound();
    console.log(`${this.name}, the ${this.breed}, barks loudly.`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound();
// Output:
// Rex makes a generic sound.
// Rex, the German Shepherd, barks loudly.

Ejemplo del mundo real: Clases Employee y Manager

Consideremos un escenario donde tenemos una clase Employee y una clase Manager que la extiende. La clase Manager agrega nueva funcionalidad sobre la funcionalidad base de Employee.


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

  getDetails() {
    return `${this.name} works as a ${this.position}.`;
  }
}

class Manager extends Employee {
  constructor(name, position, department) {
    // Call the parent class constructor using super()
    super(name, position);
    this.department = department;
  }

  getDetails() {
    return `${super.getDetails()} They manage the ${
      this.department
    } department.`;
  }
}

const manager = new Manager('Alice', 'Manager', 'Sales');
console.log(manager.getDetails());
// Output: Alice works as a Manager. They manage the Sales department.

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 1. Capítulo 14

Comprensión de la Herencia con extends y super()

¿Qué es la herencia de clases?

Cómo usar la palabra clave extends

Trabajo con el constructor en una clase hija

Uso de super() para llamar al constructor de la clase padre

Puntos clave al usar extends y super()

Ejemplo: Sobrescritura de Métodos y Uso de super()

Ejemplo del mundo real: Clases Employee y Manager

1. ¿Qué hace la palabra clave `extends`?

2. En una clase hija, ¿por qué usamos `super()` en el constructor?

3. ¿Qué mostrará el siguiente código como salida?

Awesome!

Comprensión de la Herencia con extends y super()

¿Qué es la herencia de clases?

Cómo usar la palabra clave extends

Trabajo con el constructor en una clase hija

Uso de super() para llamar al constructor de la clase padre

Puntos clave al usar extends y super()

Ejemplo: Sobrescritura de Métodos y Uso de super()

Ejemplo del mundo real: Clases Employee y Manager

1. ¿Qué hace la palabra clave `extends`?

2. En una clase hija, ¿por qué usamos `super()` en el constructor?

3. ¿Qué mostrará el siguiente código como salida?

Comprensión de la Herencia con extends y super()

¿Qué es la herencia de clases?

Cómo usar la palabra clave extends

Trabajo con el constructor en una clase hija

Uso de super() para llamar al constructor de la clase padre

Puntos clave al usar extends y super()

Ejemplo: Sobrescritura de Métodos y Uso de super()

Ejemplo del mundo real: Clases Employee y Manager

1. ¿Qué hace la palabra clave extends?

2. En una clase hija, ¿por qué usamos super() en el constructor?

3. ¿Qué mostrará el siguiente código como salida?

Awesome!

Comprensión de la Herencia con extends y super()

¿Qué es la herencia de clases?

Cómo usar la palabra clave extends

Trabajo con el constructor en una clase hija

Uso de super() para llamar al constructor de la clase padre

Puntos clave al usar extends y super()

Ejemplo: Sobrescritura de Métodos y Uso de super()

Ejemplo del mundo real: Clases Employee y Manager

1. ¿Qué hace la palabra clave extends?

2. En una clase hija, ¿por qué usamos super() en el constructor?

3. ¿Qué mostrará el siguiente código como salida?

1. ¿Qué hace la palabra clave `extends`?

2. En una clase hija, ¿por qué usamos `super()` en el constructor?

1. ¿Qué hace la palabra clave `extends`?

2. En una clase hija, ¿por qué usamos `super()` en el constructor?