extends
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.
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.
Exemple interactif
class DateFormatter extends Date {
getFormattedDate() {
const months = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
return `${this.getDate()}-${months[this.getMonth()]}-${this.getFullYear()}`;
}
}
console.log(new DateFormatter("August 19, 1975 23:15:30").getFormattedDate());
// Expected output: "19-Aug-1975"
Syntaxe
class ClasseFille extends ClasseParente { ... }
Description
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
Specification |
---|
ECMAScript® 2025 Language Specification # sec-class-definitions |
Compatibilité des navigateurs
Report problems with this compatibility data on GitHubdesktop | mobile | server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
extends |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Has more compatibility info.