JavaScript Orientado a Objeto 🚀
Tags: javascript, tutorial, beginners, oop
Published: 2022-12-11 01:56:17



## **Conceitos básicos sobre JavaScript OO - parte 1**

Essa é a primeira postagem de uma sequência de postagem sobre JavaScript Orientado a Objeto. O objetivo desse post é suprir as necessidades de programadores iniciantes e intermediários que precisam aprender ou tirar dúvidas sem a necessidade de uma longa leitura ou vídeo-aula.

Pois bem! Vamos direto para a explicação, o objetivo do post é ser rápido e direto. Nesse post vamos abordar os assuntos:


## Tópicos
⚡ [Classe](#class)
⚡ [Constructor](#constructor)
⚡ [Atributos](#this)
⚡ [This](#this)
⚡ [Métodos](#métodos)
⚡ [Instanciamento](#instanciamento)


## **Class**
Também conhecido como classe, é uma palavra reservada que tem como objetivo criar um objeto genérico para ser utilizado uma ou diversas vezes dentro do sistema.

Vamos de exemplo, imagine que precisamos criar vários carros pro nosso projeto. Concorda que ficaria cansativo criar na mão 50 classes representando 50 tipos de carros? a classe vai funcionar como forma para que possamos pegar um modelo e apenas replicá-lo 50 vezes.

Voltando para nosso exemplo carro, vou criar uma class com o nome Carro (primeira letra maiúscula), e então a partir dele vamos tornar essa classe em objeto. E como vamos fazer isso? pois bem, através do instanciamento. O **instanciamento** é a palavra usada para dizer que vamos criar um objeto daquela classe.

Vamos deixar a teoria de lado por enquanto e vamos fazer na prática tudo o que foi dito até então.

```javascript
// Criando classe carro
class Carro {
	constructor() {

	}
}
```

Eu sei, eu sei… tem um função “constructor” dentro da classe, essa “função” é o nosso próximo tópico.


## **Constructor**
[Topo](#tópicos)
Na verdade, o _constructor_ é um método passado dentro da classe responsável por receber atributos passados no momento do **instanciamento**. Quando o usuário cria um objeto (instanciamento), o **constructor** fica responsável por receber os atributos passados como parâmetro pelo usuário.

Vamos definir quais atributos nossa classe vai ter, quando pensamos em carros de imediato vem algumas informações à mente, como por exemplo: fabricante, modelo, número de portas, ano de lançamento, entre outros. Essas características serão nossos atributos.

```javascript
class Carro {
  // passando os atributos da classe Carro
    constructor(fabricante, modelo, qtdPortas, anoLancamento) {
  
  }
}
```


## **This**
[Topo](#tópicos)
Acredito que não há necessidade de um tópico sobre atributos pois é um conceito relativamente simples. Pois bem, pulando para o próximo tópico temos o conceito de **This**, uma palavra reserva que acaba confundindo bastante.

Se eu pudesse explicar com poucas palavras, diria que o **This** é uma auto referência a própria classe onde está sendo utilizado. Mas vamos deixar de lado a teoria e mostrar na prática pra ficar mais fácil de entender.

```javascript
class Carro {
  constructor(fabricante, modelo, qtdPortas, anoLancamento) {
    this.fabricante = fabricante;
    this.modelo = modelo;
    this.qtdPortas = qtdPortas;
    this.anoLancamento = anoLancamento;
  }
}
```

Ou seja, literalmente o **this** está dizendo: 
> este atributo fabricante da classe carro vai receber o valor fabricante passado como parâmetro pelo constructor.

Veja que beleza, já temos nossa classe **carro** construída. Porém não acabou, existem outras várias coisas que podem ser feitas com nossa classe, uma delas é criar comportamentos. Sabemos que o carro tem funcionalidades como acelerar, frear, entre outras, e tudo isso é possível utilizando métodos.


## **Métodos**
[Topo](#tópicos)
Os métodos são comportamentos que nossa classe pode possuir, esses métodos são passados para os objeto instanciados ou podem ser criados individualmente por cada **instanciamento** como característica única.

Por exemplo: A classe carro possui o método acelerar e frear, essa é uma característica que todos os carros possuem, porém alguns carros podem possuir funcionalidades únicas como retrair o aerofólio.

Agora que sabemos o que é métodos, vamos pôr tudo em prática, mas antes vamos tirar alguns atributos para nosso exemplo.


```javascript
class Carro {
  constructor() {
    this.fabricante = 'Nissan';
    this.modelo = 'GT-r';
    this.velocidade = 0;
  }

  // método
  Acelerar() {
    console.log("Acelerar…");
  }

  Frear() {
    console.log("Frear…");
  }
}
```

Agora temos nossa classe e métodos criados, mas existe um porém. Como você pode ver, passei os valores dos atributos manualmente e isso não é correto. Esses valores devem ser passados quando criamos o objeto, então ele recebe os valores de acordo com o objeto que foi criado.


## **Instanciamento**
[Topo](#tópicos)
Vamos **instanciar** essa classe carro e criar um carro de acordo com o nosso objetivo. Eu por exemplo quero criar dois carros que gosto bastante, o **Nissan GTR** e a **Lamborghini Gallardo**. 


```javascript
class Carro {
  constructor(fabricante, modelo, velocidade) {
    this.fabricante = fabricante;
    this.modelo = modelo;
    this.velocidade = velocidade;
  }

  // métodos
  Acelerar() {
    console.log("Acelerar...");
  }

  Frear() {
    console.log("Frear...");
  }
}

const carro1 = new Carro("Nissan", "Gt-r", 110);

const carro2 = new Carro("Lamborghini", "Gallardo", 180);
```

Os nossos objetos foram criados com sucesso. Agora vamos mandar imprimi-los;

```javascript
console.log(carro1);
/* Carro {
  fabricante: 'Nissan',
  modelo: 'Gt-r',
  velocidade: 110
} */

console.log(carro2);
/* Carro {
  fabricante: 'Lamborghini',
  modelo: 'Gallardo',
  velocidade: 180
} */
```

Exibindo alguns atributos dos objetos.

```javascript
console.log(carro1.fabricante);
// Nissan

console.log(carro2.valocidade);
// 180
```

Rodando os métodos dos objetos.

```javascript
carro1.Acelerar();
// Acelerando...

carro2.Frear();
// Frear...
```

Passando informação pelo parâmetro do método.

```javascript
class Carro {
  constructor(fabricante, modelo, velocidade) {
    this.fabricante = fabricante;
    this.modelo = modelo;
    this.velocidade = velocidade;
  }

  // métodos
  Acelerar() {
    console.log("Acelerando o", this.modelo);
  }

  Frear() {
    console.log("Frear...");
  }
}

carro1.Acelerar(‘Nissan’);
// Acelerando o Nissan
```

É isso, se gostou da o like :)