Introdução a Classes e Objetos em JavaScript

Agora vamos estudar POO em JavaScript. Vamos considerar um exemplo da vida real, e depois transferi-lo para JavaScript.

Como exemplo, vamos usar um carro. Ele tem rodas, cor, tipo de carroceria, capacidade do motor e assim por diante. Além disso, o motorista pode dar comandos a ele: andar, parar, virar à direita, à esquerda, etc.

Podemos dizer que existe uma certa classe de carros, possuindo propriedades comuns (todos têm rodas e todos podem receber comandos).

Um carro específico, estacionado na rua - é um representante dessa classe, ou, em outras palavras, um objeto dessa classe. Todos os objetos desta classe têm propriedades: número de rodas, cor, tipo de carroceria e métodos: andar, parar, virar à direita, à esquerda.

Em outras palavras, a própria classe é um projeto, um plano de acordo com o qual os carros são feitos na fábrica. O objeto é o próprio carro, feito de acordo com esses planos.

Em JavaScript, uma classe é criada usando a palavra-chave class, seguida pelo nome da classe. Vamos criar a classe Car:

javascriptclass Car {
  // código aqui, ou seja, o projeto JavaScript do carro
}

Vamos agora especificar em nosso projeto que qualquer carro criado a partir deste projeto terá uma propriedade para a cor e uma propriedade para a quantidade de combustível.

Para isso, dentro da classe, escrevemos a propriedade color e a propriedade fuel:

javascriptclass Car {
  color; // cor do carro
  fuel;  // quantidade de combustível
}

Agora vamos criar os métodos da nossa classe. Em JavaScript, os métodos são semelhantes a funções comuns, só que são declarados sem a palavra-chave function.

Como mencionado acima, nosso carro pode andar, pode virar, pode parar. Vamos criar os métodos correspondentes em nossa classe:

javascriptclass Car {
  color; // cor do carro
  fuel;  // quantidade de combustível
  
  // Comando para andar:
  go() {
    // algum código JavaScript
  }
  
  // Comando para virar:
  turn() {
    // algum código JavaScript
  }
  
  // Comando para parar:
  stop() {
    // algum código JavaScript
  }
}

Criamos o projeto do nosso carro. Agora precisamos ir para a fábrica e fazer um objeto desta classe (ou seja, um carro específico).

Em JavaScript, isso é feito usando a palavra-chave new, após a qual é escrito o nome da classe:

javascriptnew Car; // comandamos à fábrica para fazer um carro

No entanto, se apenas criarmos um objeto da classe - isso não levará a nada (é o mesmo que, por exemplo, declarar um array e não atribuí-lo a lugar nenhum). Precisamos de uma variável para armazenar este objeto.

Deixe essa variável chamar-se myCar - vamos armazenar nela o objeto que criamos:

javascriptlet myCar = new Car;

Após a criação do carro, podemos acessar suas propriedades. O acesso a elas ocorre através de um ponto. Vamos definir as propriedades do nosso objeto:

javascriptlet myCar = new Car; // comandamos à fábrica para fazer um carro

myCar.color = 'red'; // pintamos de vermelho
myCar.fuel = 50;     // abastecemos com combustível

Pronto, nosso carro foi criado, pintado e abastecido. Agora podemos dar comandos a ele através dos métodos deste carro.

O acesso aos métodos também ocorre através de um ponto, mas, ao contrário da propriedade, após o nome do método, devem ser escritos parênteses. Vamos dar comandos ao nosso objeto:

javascriptmyCar.go();
myCar.turn();
myCar.stop();