Viewing: developer.mozilla.org

extends

Baseline Large disponibilit

Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2016.

En savoir plus
Voir la compatibilit complte

Le mot-cl extends est utilis dans les dclarations et expressions de classes afin de signifier qu'un type reprsent par une classe hrite d'un autre type.

Dans cet article

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

Le mot-cl extends peut tre utilis pour crer des sous-classes de classes existantes (natives ou non).

La proprit .prototype d'une classe fille (aussi appele une extension) doit tre un Object ou null.

Exemples

Utiliser `extends`

Ce fragment de code est tir de cet exemple et cre une classe Carr qui hrite 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 drives, 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 cre l'quivalent d'une sous-classe pour Date :

class maDate extends Date {
  constructor() {
    super();
  }

  getFormattedDate() {
    var mois = [
      "Jan",
      "Fv",
      "Mar",
      "Avr",
      "Mai",
      "Juin",
      "Juil",
      "Aot",
      "Sep",
      "Oct",
      "Nov",
      "Dc",
    ];
    return (
      this.getDate() + "-" + mois[this.getMonth()] + "-" + this.getFullYear()
    );
  }
}

Ces exemples sont extraits de ces deux pages : dmonstration, source.

tendre `null`

tendre null se fait comme avec une classe normale sauf que l'objet prototype n'hrite pas de Object.

class extensionNull extends null {
  constructor() {}
}

Object.getPrototypeOf(extensionNull); // Function.prototype
Object.getPrototypeOf(extensionNull.prototype); // null

new extensionNull(); // ReferenceError

Spcifications

Spcification
ECMAScript 2027 LanguageSpecification # sec-class-definitions

Compatibilit des navigateurs

Voir aussi

Aider amliorer MDN

Cette page vous a-t-elle t utile ?

Oui Non

Apprendre contribuer

Cette page a t modifie le 22 mai 2026 par les contributeurices du MDN.

Voir cette page sur GitHub Signaler un problme avec ce contenu