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

js
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 :

js
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 :

js
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.

js
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 GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
extends

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Has more compatibility info.

Voir aussi