por JavaScript allows us to repeat properties on multiple elements through its concept of inheritance. In this post, we will teach you how to use inheritance to create patterns in JavaScript and thus write more efficient code.
What is inheritance in JavaScript?
Inheritance in JavaScript is a concept that allows us to make one object inherit the behaviors of another, just like the characteristics of a living being would in real life. In addition, we can add behaviors along the inheritance line so that each object has unique or new characteristics. To learn more about this concept, we invite you to read our post on inheritance in JavaScript.
How to use inheritance to create patterns in JavaScript?
A great way to practice writing inheritance in JavaScript is to model the biological characteristics of the animal kingdom. In this post, we will teach you how to use classic inheritance writing to create patterns and repeat behaviors across multiple objects. In this case, we will model the zoological classification of some animals.
So, we can start by creating different classes for the animals we want. Remember that classes in JavaScript tend to be written with the nomenclature UpperCamelCase, which tells us that the word will begin with a capital letter. In this case, we will write our classes with the methodology of the class keyword. We invite you to learn more about the different ways of writing this element in our post on classes in JavaScript.
Suppose we have the classes of animals Lion, Whale, Mosquito and Bee, which for now will be empty. How can we use inheritance to create patterns in JavaScript? We just have to think about the existing patterns in these classes that we have created. We know, for example, that the lion and the whale are mammals. According to this, we can create a class Mammal that has the property of being a mammal and inherits these properties to the lion and whale. The same with the mosquito and the bee, which can be children of a kind Insect.
Here’s how we would create these parent classes:
class Mammal {
feedWithMil() {
return true;
}
}
class Insect {
hasSpine() {
return false
}
}
With this we have defined the classes that differentiate these animals. However, We can also create a class that unites them all. So we can create the class Animal, who will be father of all classes. This class does not need to inherit all animals, since just inherit from the classes Insect and Mammal so that its properties apply to the entire tree. Next, we present this class:
class Animal {
living being () {
return true;
}
}
So using inheritance to create patterns in JavaScript would look like this, starting from the class Animal:
class Mammal extends Animal {
feedWithMilk() {
return true;
}
}
class Insect extends Animal {
hasSpine() {
return false
}
}
class Leon extends Mammal
}
class Whale extends Mammal {
}
class Mosquito extends Insect {
}
class Bee extends Insect{
}
Thanks to the keyword extends, which defines the class from which an object will inherit properties, all animals will have the properties of Animal. This happens because the classes Lion and Whale will inherit the properties of the class Mammalwhich in turn inherits the properties of Animal. The same thing happens with class. Mosquito and Bee, that inherit from the class Insect, also daughter of the class Animal.
What this particular inheritance generates is that we can ask each animal class about the methods FeedWithMilk, hasSpine and Living being. Each animal, therefore, will have a true, false or undefined depending on the category you are in.
We hope that with this example it will be easier to understand how to use inheritance to create patterns in JavaScript. What this concept allows us is create objects with specific behaviors and give them a category in a feature tree.
When talking about classes in JavaScript, we say that they resemble the molds of a factory, since they reproduce an object with the same characteristics as the previous one. Under this same analogy, Heirlooms allow us to create different layers in these molds and differentiate our objects.
Do you want to continue learning?
In this post you have learned how to use inheritance to create patterns in JavaScript, putting into practice a theoretical concept that you have learned before. firmly believes in the power of combining theory with practice to accelerate the learning process. Therefore, if you want to continue learning about JavaScript and master this programming language, we invite you to be part of our Full Stack Web Development Bootcamp.
There, in just a few months, you will master this and other programming languages for the webas may be the case with HTML. If you are ready to commit to your learning and want to succeed in the IT sector, We are waiting for you in this intensive training to become a web developer!