Programação Orientada a Objetos em JavaScript

Claudiney Junior
Nerdzão/Nerdgirlz
Published in
6 min readFeb 19, 2018

E aí pessoal, tudo bom? Quero compartilhar uma coisa bem legal com vocês aqui.

Nós sabemos que Javascript é uma linguagem fracamente tipada, ou seja, as variáveis não precisam ter um tipo definido assim que nós as declaramos, e também podemos mudar o tipo que é armazenado nas mesmas em tempo de execução, porém existem maneiras de usarmos a Orientação a Objetos no JavaScript. Mas primeiro vamos definir, de fato, o que é POO (Programação Orientada a Objetos)

Conceito de POO

O objetivo de todo programador é criar soluções que aumentem a produtividade ou facilitem a vida dos usuários, portanto, devemos sempre buscar resolver problemas da vida real, como a automatização do registro de um fluxo de caixa, controlar quais carros entram e saem de um estacionamento, o horário dos ônibus de uma cidade, etc…

Portanto, tratamos, no código, de coisas que existem no mundo “real”.

The Matrix (1999)

As coisas normalmente tem propriedades, um animal, por exemplo, tem uma espécie (cachorro, gato, pato), tem um som característico (‘Au au’, ‘miau’, ‘quack’), tem um nome (‘Rex’, ‘Fifi’, ‘Donald’) e uma idade. Esse mesmo animal, que tem um som característico às vezes emite o som característico que lhe é atribuído.

Agora imagine que para cada um desses 3 animais que eu listei nós tivéssemos que declarar variáveis, funções e saber, o tempo todo, como cada coisa funciona. Acaba sobrecarregando a cabeça da gente né? Também temos que considerar que, normalmente, trabalhamos em equipes, e talvez eu tenha que usar o que outra pessoa codificou. Na verdade, isso é quase uma certeza.

Então a POO aumenta o grau de abstração do programador. Tá, a primeira vez que ouvi essa frase eu fiquei pensando: “Ahn? Queque ta co tessenu?” hahahaha. Mas apesar da frase, em um primeiro momento, parecer assutadora a informação contida nela é bem simples. O Programador vai ter que se preocupar menos com como as coisas funcionam por dentro, depois que houver modelado as Classes e interfaces. Temos, assim, uma visão muito mais parecida com a que temos aqui “fora”. Exisitem outras vantagens em se fazer uma modelagem e estrutura de código legais.

Posso colocar a questão do reaproveitamento de código. Não há motivo para codificar sempre a mesma coisa, é perder tempo e aplicar esforço onde não é necessário. Reusar o código deve ser uma preocupação de qualquer programador. Se você, ou outra pessoa, consegue reusar um código que você criou isso quer dizer que você fez um bom trabalho! A maior dica que já me deram é: Faça com que suas funções executem somente uma coisa, mas que o façam bem feito!

“O reuso de código é o Santo Graal da Engenharia de Software”

Classes

Uma classe é a estrutura que abstrai um determinado conjunto de características, chamadas de atributos, e ações, chamadas de métodos.

Em javascript usamos o identificador class para declarar uma classe, seguido pelo nome da classe, com a primeira letra em caixa alta(por convenção).

Objetos

Nossa, até que enfim chegamos nos objetos né? A programação é orientada a objetos e eu não falei deles ainda ;D

Objetos são instâncias das classes. Falando dos animais, imagine que vc tem um gato e um cachorro, ambos derivam da classe Animal, porém cada um tem suas características e são seres diferentes, portanto, cada um seria uma instância da classe Animal, entende? Bom, chega de falar, vamos ao código disso.

“Falar é fácil. Me mostre o código” — Linus Torvalds (tradução adaptada)

Vamos primeiro declarar a classe Animal:

class Animal {  constructor(type, name, sound, age) {    this.type = type;    this.name = name;    this.sound = sound;    this.age = age;  }  makeASound() {    console.log(`${this.name} says: ${this.sound}`);  }}

No exemplo temos o identificador class e o nome da classe, com a primeira letra em caixa alta, como eu havia dito :D. Logo após temo o constructor, que é um conceito que precisa ser entendido por todos que trabalham com Orientação a Objetos.

O método construtor, é o método que será executado no momento da criação de uma instância daquela classe, ou seja, no momento da criação de um objeto. Ele é um conjunto de instruções que deve ser executada a fim de preparar o objeto para ser usado. O método construtor pode, ou não, receber atributos, no nosso caso o método recebe todos os atributos do animal que será criado.

Tenho também o identificador this que, simplificando bastante, trata dos atributos inerentes somente ao objeto manipulado naquele momento. Em um artigo posterior eu falarei um pouco mais sobre escopo de variáveis em JavaScript.

E, por último, mas não menos importante, declaro a função makeASound que exibirá na tela uma mensagem mostrando o atributo nome e o som que o animal produz.

Instanciando Objetos

Agora já declarei uma classe, lembrando que, diferentemente das funções que são hoisted (isso quer dizer que a você pode usar uma função antes de declara-lá no código, o JavaScript se encarregará de levar a declaração ao topo), as classes obrigatoriamente devem ser declaradas antes de ser usadas.

Para criar um objeto usamos o identificador new seguido pelo nome da classe, e passamos parametros para o construtor, se necessário. Vamos ver isso :D

var pudim = new Animal('cat', 'Pudim', 'meauou', 3);var misty = new Animal('dog', 'Misty', 'Au Au Au', 1);var vaca = new Animal();

Acima, por três vezes, eu declaro uma variável e atribuo um objeto recém instanciado a ela. Vamos deixar de lado os nomes que eu escolhi, meus bichos tem nomes diferentes mesmo. Reparem que nas variáveis misty e vaca eu passei, ao construtor, todos os atributos possíveis, portanto todas as variáveis tratadas por ele serão atribuídas de forma correta.

Mas na variável vaca eu escolhi não passar nenhum atributo, ou seja, todas os atributos deste objeto estarão como undefined. Claro que, normalmente, nós devemos criar métodos getters e setters para as propriedades de uma classe, a fim que possamos manipular estes atributos após a criação dos objetos. Mas o momento de falar sobre isso não é este, só preciso que vocês saibam que isto não é imutável.

Por fim vamos mostrar como estes objetos estão, e como a função makeASound é executada.

console.log(pudim); 
// Output:
// Animal { type: 'cat', name: 'Pudim', sound: 'meauou', age: 3 }
console.log(misty);
// Output:
// Animal{ type: 'dog', name: 'Misty', sound: 'Au Au Au', age: 1 }
console.log(vaca);
// Output:
// Animal {
// type: undefined,
// name: undefined,
// sound: undefined,
// age: undefined }
pudim.makeASound();
// Output: Pudim says: meauou
misty.makeASound();
// Output: Misty says: Au Au Au
vaca.makeASound();
// Output: undefined says: undefined

Acima podemos ver os atributos de cada um dos objetos instanciados, assim como a execução do método que declarei na classe Animal, aumentando o grau de abstração do programador que usará esta classe, assim como o reaproveitamento de código, pois não precisei declarar várias vezes as propriedades e métodos para cada “variável” que usei daquele tipo, bem legal né?

Essa foi uma introdução de orientação a objetos, em breve publicarei textos falando sobre herança, sobrescrita e algumas outras coisas legais pra ajudar vocês a dominarem esse paradigma de programação.

Há um link para esse projeto, já funcionando no GitHub, você pode acessá-lo clicando aqui.

Para mais dicas sobre JavaScript e Node.js se inscreva no meu canal do YouTube, sempre tem vídeo novo :D. Inscreva-se aqui.

Espero que tenha ajudado :D

Um abraço.’.

--

--

Claudiney Junior
Nerdzão/Nerdgirlz

Senior Engineering Manager @ iFood | Community Manager @ CaquiCoders