MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/a3e7b5301fea

extends

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.

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;
  }

  set aire(valeur) {
    this.largeur = Math.sqrt(valeur);
    this.hauteur = Math.sqrt(valeur);
    this.aire = valeur;
  }
}

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

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple 42.0 45 (45) (Oui) ? ? ?
Création de sous-classes pour les tableaux (Array) 43.0 53 (53) (Oui) ? ? ?
Fonctionnalité Android Webview Android Chrome pour Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile
Support simple Pas de support 42.0 42.0 45.0 (45) (Oui) ? ? ?
Création de sous-classes pour les tableaux (Array) Pas de support 43.0 ? Pas de support (Oui) ? ? ?

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,