2.7 Comprendre les classes

Après les imports/exports, nous découvrons une autre fonctionnalité essentielle du JavaScript moderne : les classes. Une classe est en quelque sorte un plan pour créer des objets. Elle peut contenir des propriétés (variables attachées à l'instance) et des méthodes (fonctions attachées à l'instance). En React, les classes ont longtemps servi à créer des composants.

Concepts clés d'une classe

• Déclaration avec le mot-clé class.
• Méthode spéciale constructor() pour initialiser.
• Mot-clé this pour accéder aux propriétés.
• Instanciation avec new MaClasse().
• Héritage avec extends et appel à super().

Le constructeur est exécuté automatiquement à chaque instanciation. On y initialise les propriétés avec this.maProp = ... Les méthodes se déclarent ensuite à l'intérieur du corps de la classe. Pour créer une nouvelle instance, on utilise le mot-clé new suivi du nom de la classe. Les classes supportent l'héritage avec extends : la classe enfant hérite des propriétés et méthodes du parent.

class Human {
  constructor() {
    this.gender = "male";
  }
  printGender() { console.log(this.gender); }
}

class Person extends Human {
  constructor() {
    super();                  // OBLIGATOIRE dans la classe dérivée
    this.name = "Mathieu";
  }
  printMyName() { console.log(this.name); }
}

const p = new Person();
p.printMyName();    // Mathieu
p.printGender();    // male

Un point important : si une classe étend une autre classe et définit son propre constructeur, elle doit obligatoirement appeler super() avant d'utiliser this. Sans cet appel, vous obtenez une erreur d'exécution. Les classes sont une alternative plus élégante aux fonctions constructeurs et au prototype. React les utilise pour créer ce qu'on appelle des composants de classe, que nous verrons plus loin dans le cours.