Herencia es un concepto central en la programación orientada a objetos que te permite extender clases existentes y utilizar sus propiedades y métodos. JavaScript introdujo con ES6 una sintaxis de herencia más reciente y robusta que es mucho más fácil de manejar que los métodos de prototipo originales. En esta guía te mostraré cómo aplicar la herencia en JavaScript utilizando la palabra clave extends, y te explicaré paso a paso cómo llamar correctamente al constructor de la clase base con super.
Conclusiones principales
- La herencia en JavaScript se realiza a través de la palabra clave extends.
- El constructor de la clase base debe ser llamado con super.
- Las variables de instancia pueden ser referenciadas en la clase derivada mediante la palabra clave this.
Guía paso a paso
Creación de la clase base
Para comenzar con la herencia, primero creamos una clase base llamada Shape. En esta clase definimos el constructor y algunos métodos.
Aquí defines una clase Shape que tiene un constructor. Puedes definir en este constructor variables y funciones a las que otras clases puedan acceder.
Explorando la subclase
Después de crear la clase base, ahora puedes crear una subclase que herede de Shape. En este ejemplo, llamamos a la nueva clase ConcreteShape.
En esta subclase utilizamos la palabra clave extends para indicar que ConcreteShape hereda de Shape. El constructor de la subclase llama al constructor de la clase base Shape con super(), lo que es necesario para implementar la herencia correctamente.
Instanciación de la subclase
Ahora que hemos creado la subclase, es hora de crear una instancia de esta clase.
Aquí creas un nuevo objeto myShape de la clase ConcreteShape y le pasas una descripción al constructor. Luego llamas al método print, que muestra la descripción.
Añadiendo más propiedades
Puedes añadir más propiedades a tu subclase o incluso métodos que sean específicos de esta subclase.
Aquí has ampliado la clase ConcreteShape añadiendo parámetros adicionales al constructor.
Uso de la herencia
Con la palabra clave super puedes llamar al método describe de la clase base para combinar las propiedades de la clase base y de la subclase.
Resumen – Herencia en JavaScript: De ES6 a ES13
En este tutorial has aprendido cómo funciona la herencia en JavaScript, especialmente con la nueva sintaxis de class. Has visto cómo definir clases, cómo heredar de una clase base y cómo llamar correctamente al constructor. Estos mecanismos facilitan mantener tu base de código limpia y mantenible al reutilizar funciones de manera eficiente.
Preguntas frecuentes
¿Cuál es la diferencia entre super() y this?super() se utiliza para llamar al constructor de la clase base, mientras que this accede a la instancia de la clase actual.
¿Por qué es mejor el uso de clases ES6 que los prototipos?Las clases ES6 ofrecen una sintaxis más clara e intuitiva, lo que facilita la lectura y comprensión del código.
¿Puedo tener múltiples clases base?No, JavaScript no soporta la herencia múltiple. Una clase solo puede heredar de otra clase.
¿Qué pasa si no llamo a super()?Si no llamas a super(), obtendrás un error porque el constructor de la clase base, que inicializa lo que es necesario para la clase, no se ejecutará.
