JavaScript nos permite repetir propiedades en varios elementos a través de su concepto de herencia. En este post, te enseñaremos cómo usar la herencia para crear patrones en JavaScript y así escribir un código más eficiente.
¿Cómo usar la herencia para crear patrones en JavaScript?
Una gran forma de practicar la escritura de herencia en JavaScript es modelar las características biológicas del reino animal. En este post, te enseñaremos cómo utilizar la escritura clásica de herencia para crear patrones y repetir comportamientos en varios objetos. En este caso, modelaremos la clasificación zoológica de algunos animales.
Entonces, podemos empezar creando distintas clases para los animales que deseemos. Recuerda que las clases en JavaScript tienden a escribirse con la nomenclatura UpperCamelCase, la cual nos indica que la palabra empezará con mayúscula. En este caso, escribiremos nuestras clases con la metodología de la palabra clave class. Te invitamos a conocer más sobre las distintas formas de escribir este elemento en nuestro post sobre las clases en JavaScript.
Supongamos que tenemos las clases de animales León, Ballena, Mosquito y Abeja, que por ahora estarán vacías. ¿Cómo podemos usar la herencia para crear patrones en JavaScript? Solo tenemos que pensar en los patrones existentes en estas clases que hemos creado. Sabemos, por ejemplo, que el león y la ballena son animales mamíferos. Según esto, podemos crear una clase Mammal que tenga la propiedad de ser mamífero y le herede estas propiedades al león y ballena. Lo mismo con el mosquito y la abeja, que pueden ser hijos de una clase Insect.
A continuación, te presentamos cómo crearíamos estas clases padre:
class Mammal {
feedWithMil () {
return true;
}
}
class Insect {
hasSpine () {
return false
}
}Con esto hemos definido las clases que diferencian estos animales. Sin embargo, también podemos crear una clase que los una a todos. Entonces, podemos crear la clase Animal, que será padre de todas las clases. Esta clase no necesita heredar a todos los animales, pues basta con que herede a las clases Insect y Mammal para que sus propiedades apliquen a todo el árbol. A continuación, te presentamos esta clase:
class Animal {
serVivo () {
return true;
}
}Entonces, usar la herencia para crear patrones en JavaScript se vería de la siguiente manera, partiendo de la clase Animal:
class Mammal extends Animal {
feedWithMilk () {
return true;
}
}
class Insect extends Animal {
hasSpine () {
return false
}
}
class Leon extends Mammal{
}
class Ballena extends Mammal {
}
class Mosquito extends Insect {
}
class Abeja extends Insect{
}Gracias a la palabra clave extends, que define la clase de la que un objeto heredará propiedades, todos los animales tendrán las propiedades de Animal. Esto sucede porque las clases León y Ballena heredarán las propiedades de la clase Mammal, que hereda a su vez las propiedades de Animal. Lo mismo sucede con la clase Mosquito y Abeja, que heredan de la clase Insect, también hija de la clase Animal.
Lo que genera esta herencia en particular es que podamos preguntarle a cada clase de animal sobre los métodos FeedWithMilk, hasSpine y SerVivo. Cada animal, por tanto, tendrá una respuesta verdadera, falsa o undefined según la categoría en la que se encuentre.
Esperamos que con este ejemplo sea más fácil entender cómo usar la herencia para crear patrones en JavaScript. Lo que nos permite este concepto es crear objetos con comportamientos específicos y darles una categoría en un árbol de características.
Al hablar sobre clases en JavaScript, decimos que estas se parecen a los moldes de una fábrica, pues reproducen un objeto con las mismas características que el anterior. Bajo esta misma analogía, la herencia en JS nos permite crear distintas capas en estos moldes y diferenciar nuestros objetos.
En este post has aprendido cómo usar la herencia para crear patrones en JavaScript, poniendo en práctica un concepto teórico que has aprendido antes. KeepCoding cree firmemente en el poder de combinar la teoría con la práctica para acelerar el proceso de aprendizaje. Por ello, si quieres seguir aprendiendo sobre JavaScript, encapsulamiento en Javascript o prototypes, y dominar este lenguaje de programación, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp.
Allí, en tan solo unos pocos meses, dominarás este y otros lenguajes de programación para la web, como puede ser el caso de HTML. Si estás listo para comprometerte con tu aprendizaje y quieres triunfar en el sector IT, ¡te esperamos en esta formación intensiva para convertirte en desarrollador web!
