JavaScript: Campos de clase públicos y privados

Varias sugerencias amplían la sintaxis de clase existente en JavaScript con una nueva funcionalidad. Este artículo explica la nueva sintaxis para los campos de clase pública en V8 v7.2 y Chrome 72, así como los próximos campos privados.

Aquí hay un ejemplo del código que instancia la clase IncreasingCounter :

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

Tenga en cuenta que acceder al valor ejecuta un código (enviando un mensaje al registro) antes de devolver el valor. Ahora pregúntese: ¿cómo implementaría esta clase en JavaScript?

Clases ES2015

A continuación se muestra un ejemplo de cómo se puede implementar la clase IncreasingCounter utilizando la sintaxis ES2015:

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

La clase proporciona un valor de obtención y un método para incrementar un valor en un prototipo. Más curiosamente, la clase tiene un constructor que inicia la propiedad _count y establece su valor inicial en 0. Ahora usamos el prefijo de subrayado para indicar que _count no debe usarse directamente fuera de la clase, pero esto es solo una convención; en realidad, esto no es una propiedad privada, y esta semántica no está definida en el lenguaje en sí.

 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 

Campos públicos de clase

La nueva sintaxis para los campos públicos simplifica la definición de clase:

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

La propiedad _count ahora se declara de forma concisa al comienzo de la clase. Ya no necesitamos un constructor solo para definir algunos campos. Genial

Sin embargo, _count sigue siendo una propiedad pública. Y en este ejemplo específico, queremos evitar que se acceda directamente a este campo.

Campos de clases privadas

Aquí es donde los campos privados vienen al rescate. La nueva sintaxis para los campos privados es similar a la sintaxis de los campos públicos, excepto que los marca como privados con el símbolo # . Puede pensar que # es solo parte del nombre del campo:

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

Los campos privados no están disponibles fuera del cuerpo de la clase:

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

Propiedades estáticas

La sintaxis de campo de clase se puede utilizar para crear propiedades y métodos estáticos públicos y privados, como se muestra a continuación:

 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 

Simplifica el trabajo con subclases

Los beneficios de la nueva sintaxis de campo de clase se hacen más evidentes cuando se trabaja con subclases que introducen campos adicionales. Imagine la siguiente clase base animal :

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

Para crear una subclase de Cat que agrega una nueva propiedad a la instancia, anteriormente necesitaba llamar a super () para llamar al constructor de la clase base Animal antes de crear esta propiedad:

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

Hay un montón de código repetitivo solo para indicar que a los gatos realmente no les gusta bañarse. Afortunadamente, la nueva sintaxis de campo de clase elimina la necesidad de definir este constructor con una incómoda llamada a super () :

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

Total

Los campos de clases públicas están disponibles a partir de V8 v7.2 y Chrome 72. Hay planes para lanzar campos de clases privadas pronto.