super
Refers to the base class: calls its constructor or its version of a method.
Example
#class Lesson {
constructor(title) {
this.title = title
}
summary() {
return `Lesson: ${this.title}`
}
}
class VideoLesson extends Lesson {
constructor(title, minutes) {
super(title)
this.minutes = minutes
}
summary() {
return `${super.summary()}, video ${this.minutes} min`
}
}
const lesson = new VideoLesson('Flexbox', 12)
console.log(lesson.summary())
console.log(lesson)Definition and usage
#The super keyword has two uses. Called as a function, super(...), it runs the base class’s constructor, and is only allowed inside the constructor of a class that uses extends. Used with a dot, super.method(), it calls the base class’s version of a method, even if the current class has overridden it.
In a derived class’s constructor, super() must run before you use this for the first time, because only then does the object exist. Arguments passed to super() go to the parent constructor, so that’s usually where the fields shared by both classes get set.
Calling super.method() lets you extend the inherited behavior instead of rewriting it from scratch: you first do what the parent does, then add your own part. It works in regular and static class methods, and in object-literal methods written with the shorthand method() {}.
Syntax
#super(arg1, arg2)
super.method(args)
super.propertyParameters
#arg1…argN
optional
Arguments passed to the base class constructor when callingsuper(...).
More examples
#class Inventory {
constructor() {
this.items = []
}
add(item) {
this.items.push(item)
return this.items.length
}
}
class LimitedInventory extends Inventory {
add(item) {
if (this.items.length >= 2) {
return 'Backpack full'
}
return super.add(item)
}
}
const backpack = new LimitedInventory()
console.log(backpack.add('map'))
console.log(backpack.add('compass'))
console.log(backpack.add('rope'))The derived class only adds the limit check, and leaves the actual adding to the parent’s method, called through super.add().
class Account {
static create(name) {
return { name, fuel: 10 }
}
}
class PremiumAccount extends Account {
static create(name) {
return { ...super.create(name), fuel: Infinity, premium: true }
}
}
console.log(Account.create('Emma'))
console.log(PremiumAccount.create('Jack'))class User {
constructor(name) {
this.name = name
}
}
class Admin extends User {
constructor(name) {
console.log('Creating admin')
}
}
try {
new Admin('Mia')
} catch (error) {
console.log(error.name)
}A derived class’s constructor that never calls super() fails with an error the moment it finishes. Using this before super() fails the same way.
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- If a derived class’s constructor only forwards its arguments, don’t write it at all. The default constructor does that for you.
- When overriding a method, check whether calling
super.method()and adding just the difference is enough. You’ll avoid copying the parent’s code. superonly works in methods written with the shorthand, such asgreet() {}. Using it in a function assigned asgreet: function () {}, or in a plain function, is a syntax error.
Related entries
#- extendsCreates a derived class that inherits another class’s methods and can extend or override them.
- classDefines a class: a template for creating objects that share the same fields and methods.
- staticMarks a field or method as belonging to the class itself, not to instances created with new.
- thisA keyword pointing to the object a function was called on.
Spotted a mistake or missing an example? Write to us.