JavaScript Classes
JavaScript super Keyword
supercalls the parent class constructor or one of its methods.
A child constructor must call super() before it can use this.
That is how the parent gets a chance to set its own properties.
Example
Example
javascript
class Animal {
constructor(name) {
this.name = name;
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name);
this.breed = breed;
}
}
const rex = new Dog("Rex", "collie");
console.log(rex.name + " the " + rex.breed);super(name) let the parent set the name.
Two Uses of super
super(...) in a constructor calls the parent constructor.
super.method() anywhere else calls the parent's version of a method.
In a child constructor, super() must come before any use of this.
Syntax
Syntax
javascript
constructor(a) {
super(a);
}
method() {
return super.method();
}super() first, then this.
this Before super Throws
The instance does not exist until the parent constructor has run.
Using this first is a ReferenceError.
Example
Example
javascript
class Animal {
constructor(name) {
this.name = name;
}
}
class Dog extends Animal {
constructor(name) {
super(name);
this.legs = 4;
}
}
console.log(new Dog("Rex").legs);Moving this.legs above super(name) would throw.
A Missing super
A child constructor without super() throws as soon as it is used.
Example
Example
javascript
class Animal {
constructor(name) {
this.name = name;
}
}
class Dog extends Animal {
constructor(name) {
super(name);
}
}
console.log(new Dog("Rex").name);Removing the super(name) line would make this fail.
Calling a Parent Method
super.method() runs the parent's version rather than the child's.
Example
Example
javascript
class Animal {
describe() {
return "an animal";
}
}
class Dog extends Animal {
describe() {
return super.describe() + " that barks";
}
}
console.log(new Dog().describe());The output is an animal that barks.
Extending Rather Than Replacing
This is the usual reason to reach for super in a method.
Example
Example
javascript
class Logger {
log(message) {
return "[log] " + message;
}
}
class TimestampLogger extends Logger {
log(message) {
return super.log("at noon: " + message);
}
}
console.log(new TimestampLogger().log("saved"));The child adds to the parent's work instead of duplicating it.
No Constructor Means an Automatic super
A child with no constructor gets one that passes everything through.
Example
Example
javascript
class Animal {
constructor(name) {
this.name = name;
}
}
class Dog extends Animal {}
console.log(new Dog("Rex").name);The arguments were handed to the parent automatically.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript super</title>
</head>
<body>
<h1>The super Keyword</h1>
<p id="out"></p>
<script>
class Product {
constructor(name, price) {
this.name = name;
this.price = price;
}
describe() {
return this.name + " costs " + this.price;
}
}
class SaleProduct extends Product {
constructor(name, price, discount) {
super(name, price);
this.discount = discount;
}
describe() {
return super.describe() + ", now " + (this.price - this.discount);
}
}
const item = new SaleProduct("Book", 100, 20);
document.getElementById("out").textContent = item.describe();
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try removing super:
Delete the super.describe() call and see how much you have to rewrite.
Important Points
super(...)calls the parent constructor.- It must run before
thisis used. super.method()calls the parent's version of a method.- A child with no constructor gets an automatic one.
superlets a child extend behaviour instead of replacing it.
Conclusion
super is the link between a child class and its parent.
The rule about calling it before this explains most inheritance errors.
Extending a parent method is usually better than rewriting it.