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
⚡ Constructor
⚡ Atributos
⚡ This
⚡ Métodos
⚡ 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.

// 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
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.

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

  }
}

This

Topo
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.

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
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.

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
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.

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;

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.

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

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

Rodando os métodos dos objetos.

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

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

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

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