Understanding the "Super Not Called" Error in JavaScript
Hello! Today we want to talk about the "Super not called" error in JavaScript. This error occurs when you are using classes and forget to call the parent class's constructor using super(). You might ask why this issue is important; the reason is that in inheritance, we need to use the properties and methods of the parent class in the child class, and if we do not use super(), we will not have access to these properties!
In general, when you define a new class and want to inherit from another class, you must use the super() constructor in your child class. Otherwise, JavaScript won't understand what values it should inherit from the parent class and the "Super not called" error will occur. This issue often arises in classes that are defined using ES6 syntax.
The solution to this problem is very simple! It is sufficient to ensure that in the constructor of the child class, you call super(). This action will cause the parent constructor to execute before anything else is done, and all necessary properties and methods will be available to you. Therefore, when you decide to create a new class, make sure you do not forget this point.
Now let’s allow an example to be more clear about how we can avoid this error.
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
constructor(name) {
super(name);
}
speak() {
console.log(`${this.name} barks.`);
}
}
const dog = new Dog('Rex');
dog.speak(); // Output: Rex barks.
Code Explanation
line 1:
class Animal { This line defines a new class named Animal.
line 2:
constructor(name) { This line defines the constructor of the class which takes the name of the animal as a parameter.
line 3:
this.name = name; In this line, the value of the name is assigned to the property name.
line 4:
speak() { This line defines a method named speak in the class.
line 5:
console.log(`${this.name} makes a noise.`); Here, the speak method uses the animal's name to display a message.
line 7:
class Dog extends Animal { This line defines the Dog class which inherits from the Animal class.
line 8:
constructor(name) { This line defines the constructor of the Dog class.
line 9:
super(name); Here, we use super to call the parent class’s constructor to initialize the Animal class.
line 11:
const dog = new Dog('Rex'); This line creates a new instance of the Dog class named 'Rex'.
line 12:
dog.speak(); In this line, the speak method is called for the dog instance, which will log 'Rex barks.' to the console.