En JavaScript, las clases funcionan como un molde que nos permite crear diversos objetos con las mismas propiedades. Pero una clase no solo puede tener objetos derivados, también puede tener clases derivadas con la ayuda de la herencia de JavaScript. En este post, te enseñaremos qué es y cómo funciona la palabra clave super en JavaScript, fundamental para heredar clases en este lenguaje de programación.
¿Qué es la palabra clave super en JavaScript?
Antes de leer este post, te recomendamos repasar tus conocimientos sobre la herencia y las clases de JavaScript, pues la palabra clave super es fundamental para entender cómo se relacionan estos dos conceptos.
Como has podido leer, la herencia en JavaScript nos permite hacer que un objeto o elemento herede propiedades de otro, facilitándonos la tarea de crear patrones. Existen dos maneras de crear herencia en JavaScript: una clásica y una prototipada. En este post, nos referiremos a la forma de escritura clásica, pues es en ella en la que es importante utilizar las keywords “super” y “constructor”.
Entonces, ¿qué es exactamente la palabra clave super en JavaScript o super in javascript? La palabra clave super es una herramienta utilizada en los objetos hijos que nos permite llamar a las propiedades y métodos del objeto padre. Entonces, al estar usando la palabra clave super en una clase de JavaScript, lo que estamos haciendo es copiar en la clase hija las propiedades del constructor de la clase padre.
¿Cómo funciona la palabra clave super en JavaScript?
La palabra clave super en JavaScript puede usarse en una clase hija justo después de definir su constructor y antes de asignar los valores en cada propiedad con la palabra clave this. Además, puede usarse para llamar propiedades de objetos literales, no solo clases.
Esta palabra clave puede emplearse con el método super.propiedad para cuando queremos llamar a una sola variable o función. También podemos usar el método super javascript (propiedad, propiedad) para enlistar las propiedades que queremos llamar. Es importante que, cuando quieras llamar a las propiedades del constructor de tu objeto padre, escribas dentro del paréntesis de super todas las propiedades que describe su constructor.
Para ponerte un ejemplo, imagina que tenemos la clase League con las siguientes propiedades:
class League
constructor (name, teams, config = { }) {
this.name = name;
this.teams = teams;
this.setup (config);
tis.matchDaySchedule = [ ];
this.scores = [ ];
this.matches = [ ];
}Además, tenemos una clase footballLeague, que quiere heredar todas sus propiedades y agregar algunas únicas. Entonces, usamos la palabra clave super en javascriptcon el paréntesis para llamar las propiedades del constructor del padre. Sin embargo, en nuestro nuevo constructor podemos agregar nuevos parámetros y asignaciones. A continuación, te mostramos cómo:
class FootballLeague extends League {
constructor (name, teams, config = { }, sobornos = [ ]) {
super (name, teams, config)
this.pointsPerWin = config.pointsPerWin;
this.pointsPerDraw = config.pointsPerDraw;
this.pointsPerLose = config.pointsPerLose;
}Ten presente que, cuando haya cualquier propiedad que tenga un valor asignado en el objeto padre pero no en el objeto hijo, el programa tomará el valor asignado al objeto padre. Por ello, te aconsejamos revisar bien la nomenclatura de todas tus propiedades, pues si nombras alguna propiedad de una manera distinta al objeto padre, el nuevo valor del objeto hijo no será tomado en cuenta.
Te invitamos a leer nuestros posts sobre cómo simplificar el constructor de JavaScript y cómo pasar un objeto como parámetro en JavaScript para aprender aún más sobre programar clases en este lenguaje, tal como has aprendido el concepto de super javascript.
Ahora que sabes qué es y cómo funciona la palabra clave super en JavaScript o super javascript, te invitamos a que sigas aprendiendo con nosotros sobre los distintos elementos de este lenguaje de programación. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás todo lo necesario para dominar el desarrollo de proyectos no solo con JavaScript, sino también con otros lenguajes de programación para la web como CSS y HTML. Así, al cabo de unos pocos meses, serás un experto en desarrollo web. ¿A qué esperas para unirte? ¡Te esperamos!
