La herencia en JavaScript nos permite crear patrones en nuestros objetos para tener un código más eficiente y limpio. En este post, te explicaremos qué es la herencia en JavaScript y las maneras en las que puede escribirse.
¿Qué es la herencia en JavaScript?
La herencia en JavaScript puede pensarse de la misma manera que la herencia genética en la vida real. Esto quiere decir que existen comportamientos y características que heredamos de nuestros ancestros. Lo mismo sucede con los objetos de JavaScript, un lenguaje de programación en el que podemos hacer que nuestro objeto herede ciertos comportamientos de otro objeto. Sobre esta herencia, podemos añadir nuevos comportamientos, que a su vez serán heredados por el siguiente objeto en la línea.
Entonces, la herencia en JavaScript funciona como una cascada. Si el abuelo le hereda al padre, basta con que el hijo herede del padre para tener las mismas propiedades del abuelo, además de las que añada el propio padre. Esto también lo podemos ver en la cadena de prototipos de JavaScript, concepto que hemos introducido en nuestro post sobre los objetos en JavaScript.
Ten presente que, aunque los objetos de nuestro proyecto hereden las propiedades de su padre, esto no quiere decir que no podamos modificar estas propiedades. Entonces, por ejemplo, si tenemos una clase Team con un método Play, el hecho de que nuestra nueva clase BasketballTeam herede este método de la clase Team no quiere decir que no podamos modificarlo en la nueva clase.
¿Cómo se escribe la herencia en JavaScript?
Al igual que con las clases, que tienen una manera funcional o prototipada y una manera crosslanguage de ser escritas, la herencia en JavaScript se puede escribir de dos maneras. A continuación, te explicamos la diferencia entre estas dos formas de escritura:
Herencia clásica
La escritura clásica de la herencia en JavaScript se basa en la keyword o palabra clave extends. Esta define qué objeto hereda de qué objeto. Entonces, si definimos una clase BasketballTeam y queremos que herede las propiedades de la clase Team, escribimos la siguiente línea de código:
class BasketballTeam extends Team
Esta línea de código hará que BasketballTeam herede las propiedades de Team. A continuación, podemos insertar la palabra clave constructor para añadir más propiedades a nuestra clase BasketballTeam sobre las que ya ha heredado. Te sugerimos leer nuestro post sobre las clases en JavaScript para saber más sobre cómo definir sus propiedades.
Un tema a tener en cuenta en esta forma de escritura es que, cuando estamos heredando de una clase y estamos utilizando un constructor, debemos llamar siempre a la palabra clave super. Esta es la manera de decirle al padre que haga todo lo que tenga que hacer del constructor. Es decir, la keyword super es una manera de invocar al elemento constructor del objeto padre, en este caso la clase Team.
Ten presente que con objeto padre nos referimos al objeto que sea el ancestro inmediato de nuestro objeto actual, no al abuelo o bisabuelo. Esto quiere decir que cada objeto llama con la keyword super a su ancestro inmediato, no es responsabilidad de un objeto llamar a todos sus ancestros, pues el ancestro inmediato debe haber hecho lo mismo. A este principio le podemos llamar responsabilidad única o single responsability.
A continuación, te mostramos un trozo de código en este tipo de escritura:
class BasketballTeam extends Team {
constructor (name) {
super (name)
this.sport = ‘Basketball’
}
getInitialSquad ( ) {
this.players.shuffle ( )
return this.players.slice (0,4)
}
play ( ) {
const initialSquad = this.getInitialSquad ( ).join (‘ , ‘)
console.log (‘${this.name} is playing with ${initialsquad}’)
}
}
Herencia prototipada
Ahora te presentamos la misma cadena de herencias con el mismo resultado, pero escrito con la escritura de herencia prototipada. Esta herencia se diferencia porque utiliza la palabra clave function para introducir su clase y define su herencia por medio del prototipo.
function BasketballTeam (name, players) {
this.name = name;
this.players = players;
this.getInitialSquad = function ( ) {
this.players.shuffle ( );
return this.players.slice (0,4);
}
this.play = function ( ) {
const initialSquad = this.getInitialSquad ( ).join (‘ , ‘);
console.log (‘${this.name} is playing with ${initialsquad}’);
}
}
BasketballTeam.prototype = new Team ();
Como puedes ver, a diferencia del elemento extends, para definir la herencia con este método definimos que el prototipo de BasketballTeam es Team al final del código. Esto lo puedes leer en la última línea del trozo anterior. Ten presente que, aunque estas formas de escritura tienen segmentos equivalentes, te recomendamos elegir una sola forma de escribir tu herencia para evitar errores.
Ahora que sabes cómo funciona la herencia en JavaScript, estás un paso más cerca de dominar este lenguaje de programación y sus intrincados elementos. Ahora, lo que sigue es dedicarte a practicar toda la teoría. Para ello, te recomendamos el Desarrollo Web Full Stack Bootcamp, en donde aprenderás a dominar este y otros lenguajes de programación para la web, como HTML. ¿A qué esperas para unirte? ¡Matricúlate ya y destaca en el sector tecnológico!
