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:

class 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:

class 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:

class 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:

new 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:

let 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:

let 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:

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