Learn how to use super () in JavaScript through examples

Object-oriented Concepts must be no stranger to a programmer. However, certainly not many of us do not understand how it works in code anymore . Not too wordy, today’s article we discuss the use of super () to implement “inheritance” in JavaScript OOP.

Super () _ For what?

What does using super () in JavaScript mean? Basically, in a child class, you use super() to call the constructor of its parent class and use super.<methodName> to call methods in its parent class. . Before learning about this article, you need to have a little understanding of the concepts of constructors, child classes and parent classes in JavaScript. If not, find out more about them here !

1. “Inherit” parent class

Super () is not the only JavaScript available – many other programming languages ​​like Java or Python also have this concept. We use super () to create a “reference” from the subclass to the parent class. However, in JavaScript, do not use the concept of class inheritance (class inheritance) as in Java or Python, but expand to the concept of prototypal inheritance (basically the same as class inheritance). )

Let’s learn a bit about them through a few examples!

In this example we have 2 classes, Fish and Trout. All fish will have information about 2 properties, habitat and length, and these 2 properties belong to Fish Class. The Trout Class also has a variety attribute, and at the same time is extended (understand the inheritance for ease) of the Fish properties (including habitat and length) (because Trout is also a type of fish. )

The Fish class constructor defines two attributes as habitat and length, while the Trout Class constructor defines the variety attribute. So why do we have to call super () in the constructor of the trout class? If we try to delete that line, we will get an error that cannot assign a value to this.variety! Why ?

That’s because in one line of the code that defines Class Trout above, we told JavaScript that we want Trout to be a subclass of Fish through the use of keyword extends. That means that this context of the Trout Class will include the properties and methods defined in the Fish Class (habitat, length, …) and add the properties and methods defined for itself (variety, …). By using super (), JavaScript is able to know what is the Fish Class that the Trout Class wants to extend, and so this context for the Trout Class can be created, containing everything “inherited” from the Fish Class and other classes. What is defined for itself.

As for the Fish Class, it doesn’t need to call super () because its parent class is JavaScript Object – obviously JavaScript knows what it is, so it doesn’t need super () anymore.

By using the super command (habitat, length), two properties are created in this context of the Trout. However we still have another way to do this. We do not need to call super () along with listing the parameters included in the Fish. The purpose of super () is not to assign Trout the values ​​Fish creates, but to ensure that JavaScript can understand what Trout wants to inherit. So we can also write as follows:

This style of writing does not need to specify which attribute is defined in Fish, which is defined in Trout, but still has the same results as in the previous example. The only difference is that by calling super () without passing parameters, the habitat and length properties included in the Trout Class will have no value assigned when they are initialized. They will carry undefined until a new value is assigned.

2. Call the method from the parent class

We can also use super () outside the constructor to call methods of the parent class.

Here we define the renderProperties method to display the properties of a class into the el element that we passed in HTML. The Trout class also has a method that does the same thing, but before adding a bit it will change the class name of el before showing. So using super () will be extremely useful in this case. Because Trout’s method has a function similar to Fish, we just need to call that method from Fish again! That’s why we use super.renderProperties () here.

Note that choosing the method name here is also important. Here we name the method for Trout Class renderPropertiesWithSuper () because we want to be able to call trout.renderProperties (). If you are stuck, still want to name your Trout Class as renderProperties ()? Obviously it is still valid, but now we can not call those two functions directly Trout anymore – i.e. calling trout.renderProperties () will only call the function defined in Trout =)))) )

Conclude

My writing is here. This is not a very difficult problem, but you will encounter super () a lot when JavaScript code (for example, when learning OOP, or React Basic, …) should understand a little bit about it. must be redundant, right =))). This article is quite difficult for me to translate for easy to understand, so if there are any mistakes, please comment below

References

https://css-tricks.com/what-is-super-in-javascript/