Syntaxe des classes JavaScript

Introduction à la syntaxe des classes JavaScript

Une classe est un modèle permettant de créer des objets qui partagent la même structure et le même comportement. Au lieu d'écrire manuellement le même code répétitif de fonction constructeur et de prototype, vous décrivez l'objet une seule fois et créez autant d'instances que nécessaire. Les classes ont été introduites dans ECMAScript 2015 (ES6) et sont devenues la façon standard de modéliser du code orienté objet en JavaScript.

Ce chapitre couvre les essentiels : comment déclarer une classe, ce que fait le constructor, comment ajouter des méthodes, des getters/setters et des champs publics, la différence entre les déclarations de classe et les expressions de classe, ainsi que deux points qui surprennent souvent — les classes sont des fonctions sous le capot, et elles ne sont pas remontées (hoisted) comme les fonctions ordinaires.

Définir une classe

Une classe est déclarée avec le mot-clé class, suivi d'un nom et d'un corps entre accolades :

class MyClass {
  // class body
}

Par convention, les noms de classe utilisent le PascalCase (Rectangle, UserAccount). Le corps contient des méthodes, des getters/setters et des champs — notez toutefois que, contrairement aux littéraux object, les membres ne sont pas séparés par des virgules.

Le constructeur

Le constructor est une méthode spéciale qui s'exécute automatiquement lorsque vous créez une instance avec new. Son rôle est de recevoir des arguments et d'initialiser les propriétés du nouvel objet via this :

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Une classe peut avoir au maximum un seul constructor. Si vous l'omettez, JavaScript en fournit un vide à votre place.

Créer une instance

Utilisez le mot-clé new pour construire une instance. new crée un nouvel objet, le lie à this, exécute le constructeur et retourne l'objet :

Méthodes de classe

Les méthodes déclarées dans le corps sont ajoutées au prototype de la classe, de sorte que chaque instance partage une seule copie plutôt que d'en avoir sa propre. À l'intérieur d'une méthode, this fait référence à l'instance sur laquelle elle a été appelée :

Les méthodes de classe sont non-énumérables, ce qui signifie qu'elles n'apparaîtront pas dans une boucle for...in ou dans Object.keys() — une autre façon dont les classes diffèrent des objets simples, où les méthodes ajoutées sont énumérables.

Getters et setters

Un getter vous permet d'exposer une valeur calculée comme s'il s'agissait d'une propriété ; un setter vous permet d'intercepter une affectation. Préfixez une méthode avec get ou set :

Les getters et les setters sont idéaux pour la validation ou les valeurs dérivées. Consultez Property getters and setters pour un examen plus approfondi.

Champs de classe publics

Vous pouvez déclarer et initialiser des propriétés d'instance directement dans le corps de la classe, sans les écrire à l'intérieur du constructeur. Ce sont des champs de classe publics :

Les champs sont affectés à chaque instance (et non au prototype) avant l'exécution du corps du constructeur. Pour les champs qui doivent être masqués au code extérieur, utilisez des champs privés (le préfixe #) — traités dans Private and protected properties and methods.

Méthodes statiques

Une méthode static appartient à la classe elle-même, et non à ses instances. Les membres statiques sont pratiques pour les utilitaires ou les fonctions de fabrique qui sont liés à la classe mais ne nécessitent pas d'instance spécifique :

Les classes prennent également en charge les champs et propriétés static. Pour une vue d'ensemble complète, lisez Static properties and methods.

Expressions de classe

Tout comme les fonctions, les classes peuvent être définies en tant qu'expressions et affectées à une variable. Les expressions de classe peuvent être anonymes ou nommées :

Cela est utile lorsque vous devez créer une classe de manière conditionnelle, la passer en argument ou la retourner depuis une fonction.

Les classes sont des fonctions sous le capot

Une classe est en réalité un type particulier de fonction. La syntaxe class est en grande partie du sucre syntaxique par rapport à l'ancien modèle de fonction constructeur et prototype, avec quelques garanties supplémentaires :

Les garanties supplémentaires comprennent : le corps s'exécute toujours en mode strict, les méthodes sont non-énumérables, et un constructeur de classe ne peut pas être appelé sans new (le faire lève une TypeError).

Les classes ne sont pas remontées (hoisted)

Les déclarations de fonctions sont remontées — vous pouvez les appeler avant qu'elles n'apparaissent dans le code. Les déclarations de classe ne sont pas utilisables avant leur définition. Elles sont remontées en nom seulement, mais restent dans la « zone morte temporelle », de sorte qu'y accéder prématurément lève une ReferenceError :

Déclarez toujours une classe avant de l'utiliser.

Résumé

Les classes JavaScript donnent au code orienté objet une structure claire et prévisible. Dans ce chapitre, vous avez vu comment déclarer une classe, écrire un constructor, ajouter des méthodes de prototype, des getters/setters, des champs publics et des méthodes static, ainsi que des expressions de classe. Retenez deux points clés : une classe est une fonction sous le capot dont le corps s'exécute en mode strict et ne peut pas être appelée sans new, et les déclarations de classe ne sont pas remontées.

À partir de là, les prochaines étapes naturelles sont d'étendre les classes avec Class inheritance, de regrouper des utilitaires partagés avec Static properties and methods, et de masquer l'état interne avec Private and protected properties and methods.

Pratique