Classes

Les classes ont été introduites dans JavaScript avec ECMAScript 6 et sont un « sucre syntaxique » par rapport à l'héritage prototypal. Cette syntaxe n'introduit pas un nouveau modèle d'héritage dans JavaScript ! Elle fournit uniquement une syntaxe plus claire pour utiliser un modèle classique et gérer l'héritage.

Définir des classes

En réalité, les classes sont des fonctions, aussi, de la même façon qu'il y a des expressions de fonctions et des déclarations de fonctions, on aura deux composants pour cette syntaxe :

• il y a aussi des expressions de classes
• et des déclarations de classes.

Les déclarations de classes

Pour utiliser une déclaration de classe simple, on utilisera le mot-clé class, suivi par le nom de la classe qu'on déclare (ici « Polygone »).

class Polygone {
  constructor(hauteur, largeur) {
    this.hauteur = hauteur;
    this.largeur = largeur;
  }
}

Remontée des déclarations (hoisting)

Les déclarations de fonctions sont remontées dans le code. En revanche, ce n'est pas le cas pour les déclarations de classes. Ainsi, il est nécessaire de d'abord déclarer la classe avant de l'utiliser, sinon cela provoquera une exception ReferenceError :

var p = new Polygone(); // ReferenceError

class Polygone {}

Les expressions de classes

Il est possible d'utiliser des expressions de classes, nommées ou anonymes. Si on utilise un nom dans l'expression, ce nom ne sera accessible que depuis le corps de la classe.

// anonyme
var Polygone = class {
  constructor(hauteur, largeur) {
    this.hauteur = hauteur;
    this.largeur = largeur;
  }
};

// nommée
var Polygone = class Polygone {
  constructor(hauteur, largeur) {
    this.hauteur = hauteur;
    this.largeur = largeur;
  }
};

Corps d'une classe et définition des méthodes

Le corps d'une classe est la partie contenue entre les accolades. C'est dans cette partie qu'on définit les propriétés d'une classe comme ses méthodes ou ses constructeurs.

Mode strict

Le corps des classes, pour les expressions et pour les déclarations de classes, est exécuté en mode strict.

Constructeur

La méthode constructor est une méthode spéciale qui permet de créer et d'initialiser les objet créés avec une classe. Il ne peut y avoir qu'une seule méthode avec le nom "constructor" pour une classe donnée. Si la classe contint plusieurs occurences d'une méthode constructor, cela provoquera une exception SyntaxError.

Le constructeur ainsi déclaré peut utiliser le mot-clé super afin d'appeler le constructeur de la classe parente.

Méthodes statiques

Le mot-clé static permet de définir une méthode statique pour une classe. Les méthodes statiques sont appelées par rapport à la classe entière et non par rapport à une instance donnée (ces méthodes ne peuvent pas être appelées « depuis » une instance). Ces méthodes sont généralement utilisées sous formes d'utilitaires au sein d'applications.

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    static distance(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;

        return Math.sqrt(dx*dx + dy*dy);
    }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);

console.log(Point.distance(p1, p2));

Créer une sous-classe avec extends

Le mot-clé extends, utilisé dans les déclarations ou les expressions de classes, permet de créer une classe qui hérite d'une autre classe (on parle aussi de « sous-classe » ou de « classe-fille »).

class Animal { 
  constructor(nom) {
    this.nom = nom;
  }
  
  parle() {
    console.log(this.nom + ' fait du bruit.');
  }
}

class Chien extends Animal {
  parle() {
    console.log(this.nom + ' aboie.');
  }
}

Créer des sous-classes pour les objets natifs

Utiliser super pour la classe parente

Le mot-clé super est utilisé pour appeler les fonctions rattachées à un objet parent.

class Chat { 
  constructor(nom) {
    this.nom = nom;
  }
  
  parler() {
    console.log(this.nom + ' fait du bruit.');
  }
}

class Lion extends Chat {
  parler() {
    super.parler();
    console.log(this.nom + ' rugit.');
  }
}

Exemples

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les fonctions
• Les déclarations de classes
• Les expressions de classes
• super
• Billet sur les classes (traduction en français)