Descomplicando Programação Orientada a Objetos (POO) com maizena e JavaScript

Índice

1. Prólogo

Olá a todos! Estou aqui com meu primeiro artigo e, honestamente, estou um pouco nervoso, mas animado. Decidi colocar a caneta no papel (ou os dedos no teclado) principalmente por causa dos obstáculos que encontrei quando mergulhei no mundo da programação orientada a objetos. Além disso, sempre fui um pouco tímido quando se trata de escrever, então pensei: por que não melhorar isso também?

Só para esclarecer: não sou nenhum gênio sênior da programação, apenas um desenvolvedor júnior compartilhando sua jornada de aprendizado. Então, se você tiver algum conselho ou comentário, por favor, sinta-se à vontade para compartilhar.

2. 🤷‍♂️🤷‍♀️ O que é POO?

Bem, se você chegou até este artigo, é porque tem algum interesse em Programação Orientada a Objetos, ou POO **(ou **OOP, na sigla em inglês). Basicamente, a POO é um paradigma de programação que, quando aplicado corretamente, pode tornar nosso código mais organizado, estruturado e reutilizável. Isso ocorre porque, ao adotar esse paradigma, trabalhamos com 'objetos' que possuem 'propriedades' (ou características) e 'métodos' (comportamentos relacionados a esses objetos).
Mas não se preocupe, se você não está familiarizado com os termos 'objetos', 'métodos' ou 'propriedades', eu vou explicar tudo, beleza?

3.🤔📦 O que são objetos?

Seguinte, para não complicar nem para você nem para mim, eu vou te mostrar e te explicar o que é um objeto direto no código mesmo, usando uma "teoria" de memes. Para um meme existir, ele precisa de algumas propriedades como "nome", "autor", "ano de criação" e "link da imagem", e comportamentos (métodos) como "like" e "rt".

📦 Exemplo de objeto em JavaScript:

// aqui estamos criando o objeto "meme"
class Meme {
  // aqui no construtor estamos passando as propriedades nome, autor etc..
  constructor(nome, autor, anoCriacao, Linkimg) {
    this.nome = nome;
    this.autor= autor;
    this.anoCriacao= anoCriacao;
    this.Linkimg= Linkimg;
  }

  // aqui estamos criando os metodos
  like() {
   // Criamos uma função e referenciamos a propriedade que queremos "instanciando" ela,    digamos, reutilizando-a.
    console.log(`Meme ${this.nome} curtido na sua rede!`);
  }

  rt() {
    console.log(`Meme ${this.nome} retweetado na sua rede!`);
  }
  // fim do objeto
}

// ate agora nos criamos o objeto junto a seus metodos e como usamos?

// primeiro criamos uma variavel instanciando nosso objeto derivando suas propriedades
// no js utilizamos new para isso
const memedojoao= new Meme(
  // nome
  "memedojoao",
  // autor
  "joao",
  // anoCriacao
  2054,
  // Linkimg
  "<https://umlink.com/memedojoao.png>"
);
// desta maneira nos criamos um novo meme apenas usando uma estrutura ja criada sem ter que repetir mil e uma vezes um construtor e um objeto <3

// como estamos criando o memedojoao instanciando o objeto meme, dentro do nosso novo objeto (memedojoao) ja teremos os nossos metodos basta chama-lo.
memedojoao.like();
memedojoao.rt();

4.📜🤝 Herança em POO

Para entender a herança em POO, vamos usar uma analogia um pouco mais leve: sabe quando você herda algo de um parente? Brincadeiras à parte, a herança é um dos principais motivos da POO ser tão popular, pois permite que um novo objeto ou classe herde propriedades e comportamentos (métodos) de outra classe ou objeto.

Vamos supor que, além da classe 'meme', queremos criar uma 'meme2' que herda as propriedades e métodos de 'meme', mas agora queremos adicionar uma propriedade chamada 'tipo'. Para esses casos, utilizamos a herança, e o melhor de tudo, ninguém precisa 'morrer' para isso acontecer📉📈.

😶‍🌫️🪦 Exemplo de herança em JavaScript:

// nosso bom e velho meme com suas propriedades e metodos
class Meme {
  constructor(nome, autor, anoCriacao, Linkimg) {
    this.nome = nome;
    this.autor= autor;
    this.anoCriacao= anoCriacao;
    this.Linkimg= Linkimg;
  }

  like() {
    console.log(`Meme ${this.nome} curtido na sua rede!`);
  }

  rt() {
    console.log(`Meme ${this.nome} retweetado na sua rede!`);
  }

}

// aqui estamos criando nosso novo objeto "classe" chamado meme 2 que deriva de Meme
class Meme2 extends Meme {
  // Passamos no construtor as propriedades de Meme e sua nova "tipo"
  constructor(nome, autor, anoCriacao, Linkimg, tipo) {
    //Usamos "super" para acessar as propriedades de classe que derivamos no caso Meme
    super(nome, autor, anoCriacao, Linkimg);
    this.tipo= tipo;
  } 

  // Como nao temos um metodo que mostre nosso tipo criamos um 
  exibirTipo() {
    console.log(`Tipo do Meme ${this.nome}: ${this.tipo}`);
  }
}

const memedoleleo = new Meme2 (
  "memedoleleo",
  "leleo",
   2022,
  "<https://umlink.com/memedoleleo.png>",
  // apos adicionar as propriedades que estamos acostumados adicionamos a nossa nova propriedade
  "millenal"
);

memedoleleo.rt();
memedoleleo.exibirTipo();

5.🌟🐣 Polimorfismo em POO

Ok, admito que demorei um pouco para entender este conceito, então vamos juntos nessa. O polimorfismo, dentro da POO, permite que objetos de diferentes classes sejam tratados de maneira igual. Isso torna nosso código mais utilizável e flexível. Vou tentar explicar isso usando o método 'like', aplicável tanto para a classe 'meme' quanto para 'meme2.

😷🫥 Exemplo de polimorfismo em JavaScript:

class Meme {
  constructor(nome, autor, anoCriacao, Linkimg) {
    this.nome = nome;
    this.autor= autor;
    this.anoCriacao= anoCriacao;
    this.Linkimg= Linkimg;
  }

  like() {
    console.log(`Meme ${this.nome} curtido na sua rede!`);
  }

  rt() {
    console.log(`Meme ${this.nome} retweetado na sua rede!`);
  }

}

class Meme2 extends Meme {
  constructor(nome, autor, anoCriacao, Linkimg, tipo) {
    super(nome, autor, anoCriacao, Linkimg);
    this.tipo= tipo;
  } 

  exibirTipo() {
    console.log(`Tipo do Meme ${this.nome}: ${this.tipo}`);
  }

  rt() {
    console.log(`Meme ${this.nome} esta sendo curtido pelos ${this.tipo}`);
  }

}

const memedojoao= new Meme(
  "memedojoao",
  "joao",
  2054,
  "<https://umlink.com/memedojoao.png>"
);

const memedoleleo = new Meme2 (
  "memedoleleo",
  "leleo",
   2022,
  "<https://umlink.com/memedoleleo.png>",
  "millenal"
);

// Podemos ver que temos o método rt tanto no meme e meme2, porém com textos diferentes. Para utilizar o polimorfismo, precisamos criar fora das classes uma função que irá receber nossa classe e dentro dela chamar o método rt, que irá variar a escrita de acordo com a classe que for passada <3

function rtMeme(meme) {
  meme.rt();
}


rtMeme(memedojoao);
rtMeme(memedoleleo );

Espero que este artigo tenha conseguido desembaraçar um pouco esses conceitos complexos de POO para você. Caso queira se aprofundar ainda mais, indico o repositório 4noobs da He4rt Developers, que para quem nunca ouviu falar é uma das maiores, se não a maior, comunidade open-source do Brasil. Além de incentivar o aprendizado, ela contém um repositório com conteúdo sobre várias linguagens de programação, paradigmas e outros assuntos relacionados, inclusive um sobre POO💜🤝

Ah, sobre a história da maizena meia-noite, te conto! Até a próxima!😶‍🌫️😶‍🌫️