preloader

Introducción a la Herencia de Clase en JavaScript

Introducción a la Herencia de Clase en JavaScript

La herencia de clase permite a una clase extender las características de otra clase, lo cual es fundamental para añadir funcionalidades adicionales basadas en una estructura ya existente.

Entendiendo extends

La palabra clave extends en JavaScript permite que una clase hija extienda las propiedades y métodos de una clase padre. Por ejemplo, si tenemos una clase base Animal:

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

  correr(velocidad) {
    this.velocidad = velocidad;
    alert(`${this.nombre} corre a una velocidad de ${this.velocidad}.`);
  }

  detener() {
    this.velocidad = 0;
    alert(`${this.nombre} se detiene.`);
  }
}

				
			

Podemos definir una nueva clase Conejo que herede de Animal para agregar funcionalidades específicas de los conejos:

				
					class Conejo extends Animal {
  esconder() {
    alert(`¡${this.nombre} se esconde!`);
  }
}

let conejo = new Conejo("Conejito Veloz");

conejo.correr(10); // Conejito Veloz corre a una velocidad de 10.
conejo.esconder(); // ¡Conejito Veloz se esconde!

				
			

Mecánica de la Herencia

Internamente, cuando se utiliza extends, JavaScript establece Conejo.prototype.[[Prototype]] a Animal.prototype. Esto significa que cualquier método no encontrado en Conejo.prototype se buscará en Animal.prototype.

Sobrescribiendo Métodos

Es posible sobrescribir métodos de la clase padre en la clase hija. Por ejemplo, si queremos modificar el comportamiento del método detener para los conejos:

				
					class Conejo extends Animal {
  esconder() {
    alert(`¡${this.nombre} se esconde!`);
  }

  detener() {
    super.detener(); // Llama al método detener de la clase padre
    this.esconder(); // Llama al método esconder del conejo
  }
}

let conejo = new Conejo("Conejito Blanco");

conejo.correr(8); // Conejito Blanco corre a una velocidad de 8.
conejo.detener(); // Conejito Blanco se detiene. ¡Conejito Blanco se esconde!

				
			

Constructor y Herencia

Al definir un constructor en la clase hija, es esencial llamar al constructor de la clase padre usando super() antes de acceder a this. Esto asegura que las propiedades heredadas se inicialicen correctamente:

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

class Conejo extends Animal {
  constructor(nombre, longitudOrejas) {
    super(nombre);
    this.longitudOrejas = longitudOrejas;
  }
}

let conejo = new Conejo("Conejito Saltarín", 15);
alert(conejo.nombre); // Conejito Saltarín
alert(conejo.longitudOrejas); // 15

				
			

Consideraciones Avanzadas

Es importante tener en cuenta que los campos de clase sobrescritos en la clase hija pueden comportarse de manera diferente a los métodos sobrescritos, especialmente cuando se acceden en el constructor de la clase padre. JavaScript utiliza un proceso de inicialización específico para manejar esto correctamente.

Resumen

La herencia de clase en JavaScript ofrece una poderosa manera de estructurar y extender el comportamiento de los objetos. Utilizando extends y super, podemos construir jerarquías de clases que permiten la reutilización de código y la modificación de comportamientos específicos en clases hijas.

Al entender estos conceptos y practicar su aplicación, se puede aprovechar al máximo la orientación a objetos en JavaScript de manera efectiva y flexible.

Related Post

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *