Le mot-clé extends est utilisé dans les déclarations et expressions de classes afin de signifier qu'un type représenté par une classe hérite d'un autre type.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Syntaxe
class ClasseFille extends ClasseParente { ... }
Description
Le mot-clé extends peut être utilisé pour créer des sous-classes de classes existantes (natives ou non).
La propriété .prototype d'une classe fille (aussi appelée une extension) doit être un Object ou null.
Exemples
Utiliser extends
Ce fragment de code est tiré de cet exemple et crée une classe Carré qui hérite de Polygone :
class Carré extends Polygone {
constructor(longueur) {
// On utilise le constructeur de la classe parente
// avec le mot-clé super
super(longueur, longueur);
// Pour les classes dérivées, super() doit être appelé avant de
// pouvoir utiliser 'this' sinon cela provoque une exception
// ReferenceError
this.nom = 'Carré';
}
get aire() {
return this.hauteur * this.largeur;
}
}
Utiliser extends avec des objets natifs
Dans l'exemple suivant, on crée l'équivalent d'une sous-classe pour Date :
class maDate extends Date {
constructor() {
super();
}
getFormattedDate() {
var mois = ['Jan','Fév','Mar','Avr','Mai','Juin','Juil','Août','Sep','Oct','Nov','Déc'];
return this.getDate() + "-" + mois[this.getMonth()] + "-" + this.getFullYear();
}
}
Ces exemples sont extraits de ces deux pages : démonstration, source.
Étendre null
Étendre null se fait comme avec une classe normale sauf que l'objet prototype n'hérite pas de Object.prototype.
class extensionNull extends null {
constructor() {}
}
Object.getPrototypeOf(extensionNull); // Function.prototype
Object.getPrototypeOf(extensionNull.prototype); // null
new extensionNull(); // ReferenceError
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| ECMAScript 2015 (6th Edition, ECMA-262) La définition de 'extends' dans cette spécification. |
Standard | Définition initiale. |
| ECMAScript Latest Draft (ECMA-262) La définition de 'extends' dans cette spécification. |
Projet |
Compatibilité des navigateurs
| Ordinateur | Mobile | Serveur | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
extends | Chrome
Support complet
49
| Edge Support complet 13 | Firefox Support complet 45 | IE Aucun support Non | Opera Support complet 36 | Safari Support complet 9 | WebView Android
Support complet
49
| Chrome Android Support complet Oui | Firefox Android Support complet 45 | Opera Android ? | Safari iOS Support complet 9 | Samsung Internet Android Support complet Oui | nodejs
Support complet
6.0.0
|
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
- Compatibilité inconnue
- Compatibilité inconnue
- Voir les notes d'implémentation.
- Voir les notes d'implémentation.
- Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
- Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.