2.8 Class Méthodes Propriété

Après avoir vu la syntaxe classique des classes, nous découvrons ici une syntaxe plus moderne pour déclarer propriétés et méthodes. Cette écriture supprime le besoin du constructor dans la plupart des cas et utilise les fonctions fléchées pour les méthodes, ce qui évite les pièges du mot-clé this. C'est la syntaxe utilisée tout au long du cours.

Différences avec l'ancienne syntaxe

• Propriétés définies directement : maProp = valeur.
• Méthodes définies comme propriétés contenant des arrow functions.
• Pas besoin d'écrire un constructor.
• Pas besoin d'appeler super() dans la classe dérivée.
• Le mot-clé this est préservé naturellement.

Au lieu d'écrire un constructor qui fait this.maProp = ..., on déclare directement maProp = ... dans le corps de la classe. Pour les méthodes, on les écrit comme des propriétés contenant des fonctions fléchées : maMethode = () => { ... }. En coulisses, JavaScript transforme toujours cela en constructeur, mais le code est plus court et plus lisible.

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

class Person extends Human {
  name = "Mathieu";
  gender = "female";
  printMyName = () => console.log(this.name);
}

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

Pour tester cette syntaxe sur jsbin.com, pensez à passer la version JavaScript en ES6+ dans le menu déroulant. Vous verrez encore parfois des flèches à gauche dans l'éditeur mais elles peuvent être ignorées. Cette écriture moderne sera utilisée dans tout le cours React, alors prenez le temps de bien la comprendre maintenant : elle simplifie énormément la lecture du code.