Entendendo as propriedades estáticas em classes JavaScript

Entenda as propriedades estáticas em JavaScript, quando e como usá-las para compartilhar dados entre todas as instâncias de uma classe.

O que são propriedades estáticas em classes JavaScript?

As propriedades estáticas em JavaScript são aquelas que pertencem à classe e não às instâncias da classe. Isso significa que, ao contrário das propriedades normais (ou de instância), as propriedades estáticas são compartilhadas por todas as instâncias da classe. As propriedades estáticas são úteis quando você precisa armazenar informações que são comuns a todas as instâncias da classe e não variam de uma instância para outra.

Como definir propriedades estáticas em JavaScript?

As propriedades estáticas são definidas dentro da classe usando a palavra-chave static. Elas são acessadas diretamente pela classe e não por objetos criados a partir dessa classe.

Exemplo de uma propriedade estática:

class Carro {
  static numeroDeRodas = 4;
  constructor(marca, modelo) {
    this.marca = marca;
    this.modelo = modelo;
  }
  mostrarInformacoes() {
    console.log(`${this.marca} ${this.modelo}`);
  }
}

const carro1 = new Carro('Toyota', 'Corolla');
console.log(Carro.numeroDeRodas);  // 4

O que o código está fazendo: A classe Carro define a propriedade estática numeroDeRodas com o valor 4. Essa propriedade é acessada diretamente pela classe Carro usando Carro.numeroDeRodas. As instâncias da classe, como carro1, não têm acesso direto à propriedade estática; ela é exclusiva para a classe.

Diferença entre propriedades estáticas e de instância

  • Propriedades de instância: São criadas e pertencem a cada instância da classe. Cada objeto criado a partir da classe tem sua própria versão das propriedades de instância.
  • Propriedades estáticas: São criadas e pertencem à classe em si, e não às instâncias. Elas são compartilhadas por todas as instâncias da classe.

Exemplo de diferença entre propriedades estáticas e de instância:

class Carro {
  static numeroDeRodas = 4;
  constructor(marca, modelo) {
    this.marca = marca;
    this.modelo = modelo;
  }
}

const carro1 = new Carro('Toyota', 'Corolla');
const carro2 = new Carro('Honda', 'Civic');

console.log(carro1.numeroDeRodas);  // undefined
console.log(Carro.numeroDeRodas);  // 4

O que o código está fazendo: As instâncias carro1 e carro2 não possuem a propriedade numeroDeRodas porque ela é uma propriedade estática. Apenas a classe Carro tem acesso a essa propriedade, como demonstrado com Carro.numeroDeRodas.

Quando usar propriedades estáticas?

As propriedades estáticas são ideais para quando você precisa de um valor ou comportamento que seja comum a todas as instâncias de uma classe. Alguns casos de uso incluem:

  • Contadores de instâncias: Armazenar o número de objetos criados a partir de uma classe.
  • Constantes: Armazenar valores que são imutáveis e comuns a todas as instâncias.
  • Métodos utilitários: Funções que não dependem do estado de uma instância, mas da classe como um todo.

Exemplo de contador de instâncias usando propriedades estáticas:

class Carro {
  static contador = 0;
  constructor(marca, modelo) {
    this.marca = marca;
    this.modelo = modelo;
    Carro.contador++;  // Incrementa o contador sempre que um carro é criado
  }
  static mostrarContador() {
    console.log(`Total de carros criados: ${Carro.contador}`);
  }
}

const carro1 = new Carro('Toyota', 'Corolla');
const carro2 = new Carro('Honda', 'Civic');
Carro.mostrarContador();  // Total de carros criados: 2

O que o código está fazendo: A classe Carro usa uma propriedade estática contador para contar o número de instâncias criadas. Sempre que um novo Carro é instanciado, o contador é incrementado. O método estático mostrarContador() exibe o número total de carros criados.

Considerações sobre o uso de propriedades estáticas

Embora propriedades estáticas sejam úteis em muitas situações, elas devem ser usadas com cautela, pois podem tornar o código mais difícil de testar e entender, especialmente em sistemas grandes e complexos. Além disso, como elas são compartilhadas por todas as instâncias, não se deve armazenar dados específicos de instância em propriedades estáticas.

Conclusão

As propriedades estáticas em JavaScript são um recurso poderoso que permite armazenar dados comuns a todas as instâncias de uma classe. Elas ajudam a simplificar o código, evitando a duplicação de valores ou comportamentos comuns, e são especialmente úteis para armazenar constantes ou informações globais da classe. Porém, como qualquer recurso, devem ser usadas com discernimento para não complicar a manutenção do código.

As propriedades estáticas são um conceito importante em JavaScript, permitindo que você armazene dados e comportamentos comuns a todas as instâncias de uma classe. Elas são úteis em cenários onde as informações são globais e não dependem do estado específico de um objeto.

Algumas aplicações:

  • Armazenar constantes que são compartilhadas por todas as instâncias de uma classe.
  • Contabilizar ou rastrear o número de instâncias criadas de uma classe.
  • Utilizar métodos utilitários que não dependem de instâncias, mas da classe como um todo.

Dicas para quem está começando

  • Use propriedades estáticas quando precisar de valores que sejam comuns a todas as instâncias de uma classe, como contadores ou constantes.
  • Evite armazenar informações específicas de instância em propriedades estáticas, pois isso pode causar confusão no seu código.
  • Pratique criando classes com propriedades estáticas para entender como elas funcionam e quando utilizá-las corretamente.
  • Estude o uso de métodos estáticos para complementar as propriedades estáticas e criar funcionalidades úteis para a classe como um todo.

Contribuições de Fernando Antunes

Compartilhe este tutorial: O que são propriedades estáticas em classes JavaScript?

Compartilhe este tutorial

Continue aprendendo:

Como definir propriedades privadas em classes JavaScript?

Entenda como definir propriedades privadas dentro de classes em JavaScript, o que elas são e como usá-las corretamente para melhorar a segurança do código.

Tutorial anterior

Como estender objetos sem perder referência às propriedades originais?

Entenda como estender objetos em JavaScript de forma eficiente, preservando as propriedades originais e garantindo o reaproveitamento de dados.

Próximo tutorial