super
Fait référence à la classe de base : appelle son constructeur ou sa version d’une méthode.
Exemple
#class Lesson {
constructor(title) {
this.title = title
}
summary() {
return `Leçon: ${this.title}`
}
}
class VideoLesson extends Lesson {
constructor(title, minutes) {
super(title)
this.minutes = minutes
}
summary() {
return `${super.summary()}, vidéo ${this.minutes} min`
}
}
const lesson = new VideoLesson('Flexbox', 12)
console.log(lesson.summary())
console.log(lesson)Définition et utilisation
#Le mot super a deux usages. Appelé comme une fonction, super(...), il exécute le constructeur de la classe de base, et n’est autorisé que dans le constructeur d’une classe qui utilise extends. Utilisé avec un point, super.méthode(), il appelle la version de la méthode de la classe de base, même si la classe actuelle l’a redéfinie.
Dans le constructeur d’une classe dérivée, super() doit s’exécuter avant que vous utilisiez this pour la première fois, car ce n’est qu’à ce moment que l’objet existe. Les arguments passés à super() vont au constructeur du parent, c’est donc généralement là que l’on définit les champs communs aux deux classes.
Appeler super.méthode() permet d’étendre le comportement hérité au lieu de le réécrire depuis le début : vous faites d’abord ce que fait le parent, puis vous ajoutez votre part. Cela fonctionne dans les méthodes normales et statiques des classes, ainsi que dans les méthodes de littéraux d’objets écrites avec le raccourci méthode() {}.
Syntaxe
#super(arg1, arg2)
super.method(args)
super.propertyParamètres
#arg1…argN
optionnel
Les arguments transmis au constructeur de la classe de base lors de l’appel àsuper(...).
Plus d’exemples
#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 'Sac à dos plein'
}
return super.add(item)
}
}
const backpack = new LimitedInventory()
console.log(backpack.add('carte'))
console.log(backpack.add('boussole'))
console.log(backpack.add('corde'))La classe dérivée ajoute seulement la vérification de la limite, et laisse l’ajout proprement dit à la méthode du parent, appelée via 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('Léa'))
console.log(PremiumAccount.create('Lucas'))class User {
constructor(name) {
this.name = name
}
}
class Admin extends User {
constructor(name) {
console.log('Création de l’admin')
}
}
try {
new Admin('Emma')
} catch (error) {
console.log(error.name)
}Le constructeur d’une classe dérivée qui n’appelle jamais super() échoue avec une erreur au moment où il se termine. Utiliser this avant super() échoue de la même façon.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Si le constructeur d’une classe dérivée ne fait que transmettre ses arguments, ne l’écrivez pas du tout. Le constructeur par défaut le fera pour vous.
- En redéfinissant une méthode, vérifiez s’il ne suffit pas d’appeler
super.méthode()et d’ajouter seulement la différence. Vous éviterez de copier le code du parent. superne fonctionne que dans les méthodes écrites avec le raccourci, par exemplegreet() {}. Dans une fonction affectée commegreet: function () {}, ou dans une fonction ordinaire, son utilisation est une erreur de syntaxe.
Entrées associées
#- extendsCrée une classe dérivée qui hérite des méthodes d’une autre classe et peut les étendre ou les redéfinir.
- classDéfinit une classe, c’est-à-dire un modèle pour créer des objets avec les mêmes champs et méthodes.
- staticMarque un champ ou une méthode comme appartenant à la classe elle-même, et non aux objets créés avec new.
- thisMot-clé qui désigne l’objet sur lequel une fonction a été appelée.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.