AD

¿Ya dominas lo básico? Un curso estructurado de JavaScript es la vía rápida para dar el salto.

Ver cursos de JavaScript en Udemy

Enlace de afiliado. No te cuesta nada extra.

🟨Lecciones de JavaScript
Lección 17 / 69

Herencia (extender clases)

En esta lección aprenderás la herencia de clases en JavaScript con extends, para diseñar de forma eficiente clases que comparten funcionalidad. Está dirigida a quien busca «uso de extends en JavaScript» o «herencia de clases en JavaScript».

Con extends creas una clase nueva que hereda la funcionalidad de una existente. Eso es la herencia. Puedes ejecutar el constructor de la clase padre con super(). Imagínalo así: partiendo de un plano compartido llamado «Animal», añades la forma de sonar propia de cada animal: «Perro», «Gato», etc. Agrupar lo común en una clase padre te ahorra escribir el mismo código una y otra vez.

El código de ejemplo hereda de la clase Animal para crear una clase Dog. La clase Dog redefine su propio método speak(), lo que se llama «sobrescritura». Una instancia creada con new Dog("Toby") tiene tanto la propiedad nombre heredada de Animal como el speak() propio de Dog.

Un tropiezo habitual al empezar es olvidar la llamada a super() dentro del constructor de la clase hija. Si defines tu propio constructor en una clase heredada, debes llamar a super() antes de usar this para ejecutar la inicialización del padre; olvidarlo provoca un error. Cuidado también: a medida que la cadena de herencia se hace más profunda, el diseño se complica.

En el desarrollo real la herencia se usa cuando quieres compartir funcionalidad y cambiar solo parte del comportamiento: por ejemplo, heredar de un «botón base» para crear un «botón solo de envío» o un «botón solo de borrado». Es una técnica representativa del diseño orientado a objetos y una idea importante también en aplicaciones grandes.

Si en lugar de sobrescribir por completo un método del padre quieres conservar su proceso y añadir algo encima, puedes llamar al método del padre desde el método de la hija con super.speak().

La herencia es cómoda, pero si la relación entre clases padre e hija se complica demasiado, puede volver el código más difícil de leer. Pensar bien en la fase de diseño «¿esto debería ser herencia, o simplemente clases separadas?» es también una habilidad importante en los proyectos reales.

JavaScript
SALIDA

💡 Todo lo que pases a console.log() aparece en la salida de abajo.

Espacio publicitario (banner)
Espacio publicitario (en el artículo)