JavaScript: champs de classes publics et privés

Plusieurs suggestions étendent la syntaxe de classe existante en JavaScript avec de nouvelles fonctionnalités. Cet article explique la nouvelle syntaxe des champs de classe publique dans V8 v7.2 et Chrome 72, ainsi que les prochains champs privés.

Voici un exemple de code qui instancie la classe IncreasingCounter :

const counter = new IncreasingCounter(); counter.value; // logs 'Getting the current value!' // → 0 counter.increment(); counter.value; // logs 'Getting the current value!' // → 1 

Notez que l'accès à la valeur exécute du code (sortie d'un message dans le journal) avant de renvoyer la valeur. Maintenant, demandez-vous: comment implémenteriez-vous cette classe en JavaScript?

Classes ES2015

Voici un exemple de la façon dont la classe IncreasingCounter peut être implémentée à l'aide de la syntaxe ES2015:

 class IncreasingCounter { constructor() { this._count = 0; } get value() { console.log('Getting the current value!'); return this._count; } increment() { this._count++; } } 

La classe fournit une valeur getter et une méthode pour incrémenter une valeur dans un prototype. Plus curieusement, la classe a un constructeur qui initie la propriété _count et définit sa valeur initiale à 0. Maintenant, nous utilisons le préfixe de soulignement pour indiquer que _count ne doit pas être utilisé directement en dehors de la classe, mais ce n'est qu'une convention; en réalité, ce n'est pas une propriété privée, et cette sémantique n'est pas définie dans le langage lui-même.

 const counter = new IncreasingCounter(); counter.value; // logs 'Getting the current value!' // → 0 // Nothing stops people from reading or messing with the // `_count` instance property. counter._count; // → 0 counter._count = 42; counter.value; // logs 'Getting the current value!' // → 42 

Champs publics de classe

Une nouvelle syntaxe pour les champs publics simplifie la définition de classe:

 class IncreasingCounter { _count = 0; get value() { console.log('Getting the current value!'); return this._count; } increment() { this._count++; } } 

La propriété _count est maintenant déclarée de manière concise au début de la classe. Nous n'avons plus besoin d'un constructeur juste pour définir certains champs. Super!

Cependant, _count est toujours une propriété publique. Et dans cet exemple spécifique, nous voulons empêcher l'accès direct à ce champ.

Champs de cours privés

C'est là que les champs privés viennent à la rescousse. La nouvelle syntaxe des champs privés est similaire à la syntaxe des champs publics, sauf que vous les marquez comme privés à l'aide du symbole # . Vous pensez peut-être que # n'est qu'une partie du nom du champ:

 class IncreasingCounter { #count = 0; get value() { console.log('Getting the current value!'); return this.#count; } increment() { this.#count++; } } 

Les champs privés ne sont pas disponibles en dehors du corps de classe:

 const counter = new IncreasingCounter(); counter.#count; // → SyntaxError counter.#count = 42; // → SyntaxError 

Propriétés statiques

La syntaxe des champs de classe peut être utilisée pour créer des propriétés et des méthodes statiques publiques et privées, comme indiqué ci-dessous:

 class FakeMath { // `PI` is a static public property. static PI = 22 / 7; // Close enough. // `#totallyRandomNumber` is a static private property. static #totallyRandomNumber = 4; // `#computeRandomNumber` is a static private method. static #computeRandomNumber() { return FakeMath.#totallyRandomNumber; } // `random` is a static public method (ES2015 syntax) // that consumes `#computeRandomNumber`. static random() { console.log('I heard you like random numbers…') return FakeMath.#computeRandomNumber(); } } FakeMath.PI; // → 3.142857142857143 FakeMath.random(); // logs 'I heard you like random numbers…' // → 4 FakeMath.#totallyRandomNumber; // → SyntaxError FakeMath.#computeRandomNumber(); // → SyntaxError 

Simplifiez le travail avec les sous-classes

Les avantages de la nouvelle syntaxe de champ de classe deviennent plus apparents lorsque vous travaillez avec des sous-classes qui introduisent des champs supplémentaires. Imaginez la classe de base animale suivante:

 class Animal { constructor(name) { this.name = name; } } 

Pour créer une sous-classe de Cat qui ajoute une nouvelle propriété à l'instance, vous deviez auparavant appeler super () pour appeler le constructeur de la classe de base Animal avant de créer cette propriété:

 class Cat extends Animal { constructor(name) { super(name); this.likesBaths = false; } meow() { console.log('Meow!'); } } 

Il y a beaucoup de code passe-partout pour indiquer que les chats n'aiment pas vraiment prendre un bain. Heureusement, la nouvelle syntaxe de champ de classe élimine le besoin de définir ce constructeur avec un appel maladroit à super () :

 class Cat extends Animal { likesBaths = false; meow() { console.log('Meow!'); } } 

Total

Les champs de classe publique sont disponibles à partir de V8 v7.2 et Chrome 72. Il est prévu de publier bientôt des champs de classe privée.