JavaScript: campos de classe pública e privada

Várias sugestões estendem a sintaxe de classe existente no JavaScript com novas funcionalidades. Este artigo explica a nova sintaxe para os campos de classe pública na V8 v7.2 e Chrome 72, bem como os próximos campos privados.

Aqui está um exemplo do código que instancia a classe AumentingCounter :

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

Observe que o acesso ao valor executa algum código (enviando uma mensagem para o log) antes de retornar o valor. Agora, pergunte-se: como você implementaria essa classe em JavaScript?

Classes ES2015

Abaixo está um exemplo de como a classe GreateringCounter pode ser implementada usando a sintaxe do ES2015:

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

A classe fornece um valor getter e um método para incrementar um valor em um protótipo. Mais curiosamente, a classe possui um construtor que inicia a propriedade _count e define seu valor inicial como 0. Agora usamos o prefixo de sublinhado para indicar que _count não deve ser usado diretamente fora da classe, mas isso é apenas uma convenção; na realidade, isso não é uma propriedade privada e essa semântica não é definida na própria linguagem.

 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 

Classificar campos públicos

A nova sintaxe para campos públicos simplifica a definição de classe:

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

A propriedade _count agora é declarada de forma concisa no início da classe. Não precisamos mais de um construtor apenas para definir alguns campos. Ótimo!

No entanto, _count ainda é uma propriedade pública. E neste exemplo específico, queremos impedir que esse campo seja acessado diretamente.

Campos de classe privada

É aqui que os campos privados são resgatados. A nova sintaxe para campos privados é semelhante à sintaxe de campos públicos, exceto que você os marca como particulares usando o símbolo # . Você pode pensar que # é apenas parte do nome do campo:

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

Os campos particulares não estão disponíveis fora do corpo da classe:

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

Propriedades estáticas

A sintaxe do campo de classe pode ser usada para criar propriedades e métodos estáticos públicos e privados, conforme mostrado abaixo:

 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 

Simplifique o trabalho com subclasses

Os benefícios da nova sintaxe de campo de classe se tornam mais aparentes ao trabalhar com subclasses que introduzem campos adicionais. Imagine a seguinte classe base Animal :

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

Para criar uma subclasse de Cat que adiciona uma nova propriedade à instância, você anteriormente precisava chamar super () para chamar o construtor da classe base Animal antes de criar esta propriedade:

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

Há muito código padrão para indicar que os gatos realmente não gostam de tomar banho. Felizmente, a nova sintaxe de campo de classe elimina a necessidade de definir esse construtor com uma chamada incômoda para super () :

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

Total

Os campos de classe pública estão disponíveis a partir da V8 v7.2 e Chrome 72. Há planos de liberar campos de classe privada em breve.