I've used it plenty of times, and I've read that it calls the constructor function of its parent class, but I'm not really grasping the concept of it to be honest. I know it's not a concept unique to JS, so if anyone has any good links/examples to explain it in other languages, that would also be great. I thought I understood it, but as I'm trying to learn more about OOP i seem to get more confused by the day lol.
Thanks
Sorry for the pic in Japanese, but looks easy to understand.
When you use super function in your class member functions, extends keyword is also expected to be used. When you call super like super(args) in the extending class, it calls the constructor of the extended class. You can also call the other member functions of the extended class with super.methods(args), not super(args).
(From https://liginc.co.jp/266587)
UPDATE
FYI: What's the difference between "super()" and "super(props)" in React when using es6 classes?
This discussion explains well about how super in react component affects this context constraint. Good to read.
Actually, a super call in the constructor calls the constructor of the parent class. You can have access to this independently of using it or not, but in the context of react, this properties associated with this, like this.props and this.state are set and configured properly in the React.Component class constructor. So that's why you must call super first, so that this is properly setup.
If you use this, the engine will first try to access the property on the instance itself. If it doesn't exist on the instance, it'll then go to the prototype (Footballer.prototype). If it doesn't exist there, it'll then go to Human.prototype to see if the property exists.
If you use super, it'll immediately go to the parent class, Human.prototype, to see if the property exists, and will go upward from there (rather than go through the instance and child prototype first).
This will be especially important to keep in mind if a method with the same name exists both on the parent and child, which isn't uncommon.
class Human {
mouse () {
console.log('parent class');
}
}
class Footballer extends Human {
mouse() {
console.log('child class');
}
talk () {
super.mouse();
this.mouse();
}
}
const f = new Footballer();
f.talk();There is a big difference.
In languages like Java and Javascript,
with super you are accessing the parent's properties and methods.
With this you are accessing the child's properties and methods.
this.mouse() works because first the mouse property is accessed for the child (Footballer) and when not found the property is looked for in the parent (Human). This is how inheritance works. When accessing a property called x, Javascript will try to move upwards in the prototype chain until it finds a property named x.
If you define a property like kick only in Footballer, then super.kick() will not work but this.kick() will, demonstrating the difference.
class Human {
constructor (name, age) {
this.name = name;
this.age = age;
}
mouse (sentense) {
console.log(`${this.name}: "${sentense}".`);
}
}
class Footballer extends Human {
constructor(name, age, position, team) {
super(name, age);
this.team = team;
this.position = position;
}
kick(){
console.log("kicked");
}
play(){
this.kick();
super.kick();
}
talk (sentense) {
super.mouse(sentense); // This works.
this.mouse(sentense); // This also works.
}
}
const messi = new Footballer();
messi.play();