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.

En résumé

Cette leçon présente la syntaxe moderne (ES6+) pour définir les propriétés et les méthodes dans les classes JavaScript. Plutôt que d'utiliser un constructeur explicite, les propriétés peuvent être assignées directement dans la classe avec `myProperty = valeur`, et les méthodes peuvent être définies comme des fonctions fléchées stockées dans des propriétés. L'avantage principal est que les fonctions fléchées preservent correctement le contexte du mot-clé "this", évitant ainsi les problèmes courants en JavaScript. Cette syntaxe plus moderne et intuitive remplace l'approche classique tout en étant transformée en constructeurs en arrière-plan.

Points clés

Propriétés modernes: assignez directement dans la classe avec `myProperty = valeur` sans constructeur
Méthodes modernes: définissez les méthodes comme des fonctions fléchées (`myMethod = () => {...}`) pour conserver le contexte de "this"
Avantage des fonctions fléchées: le mot-clé "this" fonctionne correctement sans les problèmes des fonctions classiques
Configuration requise: le compilateur JavaScript doit être réglé sur ES6 pour reconnaître cette syntaxe
Simplicité accrue: supprimez l'appel explicit du constructeur et du mot-clé super, les propriétés et méthodes s'initialisent directement

Questions fréquentes

Quelle est la différence entre la syntaxe ancienne et la syntaxe moderne pour les propriétés dans les classes?

L'ancienne syntaxe utilise une fonction constructeur pour initialiser les propriétés. La syntaxe moderne permet d'assigner les propriétés directement dans la classe en écrivant `myProperty = valeur`, ce qui évite la nécessité d'un constructeur explicite et rend le code plus lisible.

Pourquoi est-il important d'utiliser des fonctions fléchées pour les méthodes?

Les fonctions fléchées préservent automatiquement le contexte du mot-clé "this" de leur contexte englobant, ce qui évite les problèmes courants avec "this" en JavaScript. Contrairement aux fonctions classiques, elles ne créent pas leur propre contexte "this".

Qu'est-ce qui est nécessaire pour que cette syntaxe moderne fonctionne?

Le compilateur JavaScript doit être configuré pour supporter ES6 (EcmaScript 6 ou version plus récente). Sans cette configuration, le navigateur ne reconnaîtra pas la syntaxe moderne et générera une erreur lors de l'exécution.