Classes no JavaScript Por que programar assim

1. Encontre seu código
›
2. JavaScript
›
3. Classes no JavaScript Por que programar assim

---

Hoje iremos aprender a como criar classes no JavaScript. Em frameworks JavaScript o uso de classes são bastante comuns. E nesse artigo você irá entender o que são as classes.

As classes nada mais são do que apenas programar com uma estrutura diferente. Elas são feitas para você ter uma organização diferente sobre o código.

Classes, procedural e objetos, qual melhor?

Para relembrar, programação procedural é aquela que você digita todos os códigos no mesmo escopo, no mesmo nível, ou seja, não tem separação do código.

Já as classes são uma maneira de você separar as intenções do código, ou seja, uma classe para cada entidade do software.

Por último e muito elegante, os objetos também são usados para organizar o código e separar as entidades. (Veja objetos no JavaScript).

Para ser direto sobre como programar bem em JavaScript, use os objetos ou as classes, pois, não há justificativa para você utilizar códigos procedurais. Até para pequenos scripts, um objeto é melhor do que um código procedural.

Objetos ou classes no JavaScript?

Bom, a nível de compilação, uma classe é um objeto, a diferença é apenas no modelo que um é escrito e o outro também.

Ambos são eficientes. Em termos de desempenho, as classes são mais lentas que os objetos, mas, não ligue para isso, essa diferença não é perceptível para nós. Porém é útil saber isso, talvez um dia você vá programar em uma grande empresa ou ser dono de um projeto incrível e o ganho de milissegundos pode ser bastante útil.

Como criar uma classe no JavaScript

Podemos criar uma classe no JavaScript através do comando Class seguido o nome da classe:

class Gato{
 //
}

Nota: A palavra class precisa ser minúscula e o nome da classe precisa ser CamelCase, ou seja, toda primeira letra de substantivo precisa ser maiúscula.

Bom, criamos a classe Gato em JavaScript, mas ela não faz nada. Para adicionarmos algum comportamento dentro dela, podemos adicionar nossos métodos (funções) e um método construtor, que nada mais é do que o código que será inicializado na classe antes de qualquer outro, como assim?

Constructor no JavaScript

O constructor é: Quando a classe for chamada, antes de qualquer coisa, ele vai executar o código colocado no constructor. Isso é útil quando:

• Você precisa inicializar um valor, antes de qualquer outro, exemplo: Quer verificar se a data é uma, se não ele sai do código.
• Você quer herdar valores de outra classe e usar nessa.

class Gato{
    constructor(){
     console.log('Aqui é lido antes de qualquer código')
    }
}

Para iniciar a classe, basta colocar um operador new e o nome da classe, ou seja, new Gato(). Abra o console do navegador e teste:

Veja, quando inicializamos nossa classe com a palavra new NomeDaClasse o programa imprimiu a nossa mensagem no console.log.

Continuando o tema sobre o constructor, podemos passar parâmetros para ele, por exemplo, imagine que você construiu uma classe que irá trabalhar com um valor externo, por exemplo, salário, imagine que nosso programa em JavaScript irá ter uma classe que irá gerar os tributos e todos dados necessários com um salário que virá de uma fonte externa, logo, precisamos colocar um parâmetro no nosso constructor:

class Salario{
   constructor(salario){
      //Faz algo com o parametro salario
      console.log(`O salário  passado é de ${salario}`);
   }
}
new Salario(6000);

Viu? O nome do parâmetro em constructor é você que escolhe, mas, por motivos de legibilidade, passamos um nome que seja referente ao dado passado.

Curiosidade: Podemos passar vários parâmetros e qualquer tipo de dado, arrays, objetos, números, strings, boleanos, nulos e inexistentes.

Então uma dica valiosa, seria, caso aja mais de 1 dado a ser passado, envie ele por um objeto ou por um array. Enviar como objeto é melhor pois você pode nomear o que é qual dado em seu índice, já no array não temos essa possibilidade, exemplo:

class Salario{
   constructor(dadosFiscais)
   {
      console.log(dadosFiscais);
   }
}
const dadosFiscais = {
    "nome": "Pedro Soares",
    "salario": 6000,
    "pagamento": '01/06/2022',
}
new Salario(dadosFiscais);

Veja, ficou bem mais organizado, pois, agora nós podemos saber o que representa aquele dado.

Utilizando os parâmetros passados no constructor na classe

Agora que já vimos como passar os dados, nós precisamos permitir que outros métodos da classe utilizem esses dados, pois, não vamos fazer nosso código inteiro no constructor.

Para utilizar os parâmetros passados na classe no método constructor nos métodos, associamos eles a um valor com o this na frente.

class Salario{
   constructor(dadosFiscais){
      this.salario = dadosFiscais.salario;
      this.colaborador = dadosFiscais.nome;
      this.dataPagamento = dadosFiscais.pagamento;
   }
   
   init(){
      console.log(this);
      console.log(this.salario,this.colaborador,this.dataPagamento);
   }
}
const dadosFiscais = {
    "nome": "Pedro Soares",
    "salario": 6000,
    "pagamento": '01/06/2022',
}
const salario = new Salario(dadosFiscais);
salario.init();

Veja, associamos nomes escolhidos por nós aos dados do objeto.

Nota: o this referencia a própria classe, ou seja, this.meunome iria criar uma “variavel” global para a própria classe, e para acessar essa propriedade, bastaria utilizar o this.meunome em qualquer local da classe.

Também associamos a instância da classe a uma variável const salario = new Salario(dadosFiscais), por que? Por que precisamos ter na memória do computador esses dados, pois, queremos acessar o método init(), com isso, precisamos da instância dela.

Percebeu alguma semelhança com nossa explicação sobre objetos no javascript? Pois é, é a mesma coisa, o que muda é apenas a sintaxe.

Passando os parâmetros por outro método sem ser o constructor

O constructor recebe os parâmetros passados no momento em que instanciamos / inicializamos a classe, ou seja, quando chamamos a classe inteira com o new Salario(aqui são os dados que o constructor pega).
Mas poderiamos passar esses dados para outra função, por exemplo, a init().

class Salario{
   constructor(){
  
   }
   
   init(dadosFiscais){
       this.salario = dadosFiscais.salario;
      this.colaborador = dadosFiscais.nome;
      this.dataPagamento = dadosFiscais.pagamento;
      console.log(this);
      console.log(this.salario,this.colaborador,this.dataPagamento);
   }
}
const dadosFiscais = {
    "nome": "Pedro Soares",
    "salario": 6000,
    "pagamento": '01/06/2022',
}
const salario = new Salario();
salario.init(dadosFiscais);

Iria funcionar da mesma maneira.

Quando devo passar os dados para o constructor e quando devo passar para outra classe?

Tudo depende do seu código, quando passamos um parâmetro para o constructor, ou seja, quando precisamos de um parâmetro para inicializar a classe, é por que nosso código inteiro irá depender desse parâmetro, ou, que nosso código precisa de alguma informação antes de ser inicializado.

Logo isso dependerá muito do problema que você irá resolver. Fique tranquilo, mesmo sem ter essa ideia em mente, você irá saber quando usar o constructor e quando não precisa usá-lo.

Métodos estáticos nas classes JavaScript

Métodos estáticos, são métodos fixos, ou seja, eles não irão pegar parâmetros passados no método constructor. Pois, eles não precisam de inicializar a classe para serem chamados.

Exemplo:

class Salario{

    constructor(salario){

        this.salario = salario;
    }

    static init(){

        console.log(this.salario);
    }
}
//Isso irá gerar um erro
new Salario(50000).init();

O exemplo acima irá gerar um erro, pois, como declaramos que o método init é estático, ele não funcionará com a instância da classe.
Se desejamos chamar o método init, precisamos apenas colocar Salario.init();.

Dessa maneira não estamos instanciando a classe, apenas usando um método dela. Isso é pertinente em vários momentos, as vezes temos classes que chamamos de Helpers, ou seja, classe para ajudar em partes do código, e ficar instanciando uma classe sempre que fossemos usar uma função / método dela, seria muito oneroso, nosso código iria ficar muito longo, logo, não seria simples, com isso, usamos os métodos estáticos, exemplo:

class AjustesGramaticais{
   static letrasMaiusculas(frase){
     return frase.toUpperCase();
   }
}

Logo, em vários trechos do código, poderíamos chamar esse método dessa classse sem precisar instanciar ela. Logo, essa classe é um Helper. Ou seja, um código que apenas é funcional para ajudar outros códigos.

Métodos mágicos, Getter e Setter no JavaScript

As classes no JavaScript, assim como outras linguagens, possuem métodos mágicos. Esses métodos servem para já implementaram alguma funcionalidade que normalmente teríamos que fazer. Todos métodos mágicos podem ser feitos sem o uso deles, mas, é útil você usá-los quando necessário pois isso fará você poupar tempo e código.

• Ambos métodos são feitos referenciando uma propriedade, ou seja, um valor da classe.
• A propriedade que será atribuída ou usada no método set, deveria ter no seu final _ (underline).
• O método get apenas retornar o dado para aquele propriedade, assim, você pode manipular essa propriedade como desejar.

Usando o get

class Salario{
     constructor(){
        this.salario_ = 50000;
        this.imposto = 0.16;
     }
     get salario(){
         return this.salario_ - (this.salario_ * this.imposto);
     }
     set salario(novoSalario){
        this.salario_ = novoSalario;
     }
}
const salario = new Salario();
salario.salario;