extends
Crée une classe dérivée qui hérite des méthodes d’une autre classe et peut les étendre ou les redéfinir.
Exemple
#class Exercise {
constructor(title, points) {
this.title = title
this.points = points
}
describe() {
return `${this.title} (${this.points} pts)`
}
}
class Quiz extends Exercise {
constructor(title, points, questions) {
super(title, points)
this.questions = questions
}
}
const quiz = new Quiz('Quiz sur les boucles', 10, 5)
console.log(quiz.describe())
console.log(quiz)
console.log(quiz instanceof Exercise)Définition et utilisation
#Le mot extends dans la déclaration d’une classe indique la classe de base, c’est-à-dire le parent. La classe dérivée reçoit toutes ses méthodes et peut en ajouter de nouvelles, ou redéfinir une méthode héritée en écrivant une méthode du même nom. En dessous, c’est la chaîne de prototypes qui fait le travail : le prototype de la classe dérivée pointe vers le prototype de la classe de base.
Si la classe dérivée a son propre constructeur, elle doit y appeler super(...) avant d’utiliser this pour la première fois. C’est le constructeur du parent qui crée l’objet, et ce n’est qu’ensuite que la classe dérivée peut ajouter ses propres champs. Quand une classe dérivée n’a pas de constructeur, JavaScript en ajoute un par défaut, qui transmet tous les arguments au parent.
Après extends peut se trouver n’importe quelle expression qui renvoie un constructeur, y compris une classe native comme Error, Array ou Map. On ne peut hériter que d’une seule classe. Quand vous voulez combiner des comportements venant de plusieurs sources, la composition, c’est-à-dire garder d’autres objets dans des champs, est en général le meilleur choix.
Syntaxe
#class Child extends Parent {
constructor(...args) {
super(...args)
}
}
class MyError extends Error {}Paramètres
#Parent
classe
La classe de base dont hérite la nouvelle classe. Elle peut aussi être une classe native, commeErrorouArray.
Plus d’exemples
#class Exercise {
constructor(title) {
this.title = title
}
reward() {
return 5
}
}
class Project extends Exercise {
reward() {
return 25
}
}
const tasks = [new Exercise('Question à choix multiples'), new Project('Site vitrine')]
for (const task of tasks) {
console.log(task.title, task.reward())
}La classe Project n’a pas de constructeur, donc JavaScript a utilisé celui par défaut, qui a transmis le titre au constructeur Exercise.
class Student {
constructor(name) {
this.name = name
}
}
class Mentor extends Student {
constructor(name, course) {
this.course = course
super(name)
}
}
try {
new Mentor('Lucas', 'React')
} catch (error) {
console.log(error.name)
}L’objet n’est créé que dans le constructeur du parent, donc avant que super() ne s’exécute, il n’y a encore rien à affecter à this. Le texte exact du message d’erreur diffère selon les navigateurs.
class Playlist extends Array {
totalMinutes() {
return this.reduce((sum, video) => sum + video.minutes, 0)
}
}
const playlist = new Playlist()
playlist.push({ title: 'Intro', minutes: 4 }, { title: 'Boucles', minutes: 11 })
console.log(playlist.length)
console.log(playlist.totalMinutes())
console.log(Array.isArray(playlist))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
#- N’héritez que lorsque la classe dérivée est vraiment une variante de la classe de base, par exemple un quiz est un exercice. Quand un objet a seulement un autre objet, par exemple un joueur a un inventaire, choisissez la composition.
- Dans le constructeur d’une classe dérivée, appelez
super()tout au début. Utiliserthisavant se termine par une erreurReferenceError. - Évitez les hiérarchies profondes. Deux ou trois niveaux d’héritage sont en général un maximum raisonnable ; au-delà, le code devient difficile à suivre.
Entrées associées
#- classDéfinit une classe, c’est-à-dire un modèle pour créer des objets avec les mêmes champs et méthodes.
- superFait référence à la classe de base : appelle son constructeur ou sa version d’une méthode.
- instanceofVérifie si un objet a été créé par une classe donnée, ou par une classe qui en hérite.
- staticMarque un champ ou une méthode comme appartenant à la classe elle-même, et non aux objets créés avec new.
- #champLes champs et méthodes préfixés par # sont privés : seul le code à l’intérieur de la classe peut y accéder.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.