Descomplicando Programação Orientada a Objetos (POO) com maizena e JavaScript
Tags: webdev, javascript, beginners, braziliandevs
Published: 2023-08-02 23:00:54



**Índice**

1. [**Prólogo**](#1-prólogo)
2.  [**O que é POO?**](#2-o-que-é-poo)
3.  [**O que são objetos?**](#3-o-que-são-objetos)
4.  [**Herança em POO**](#4-herança-em-poo)
5.  [**Polimorfismo em POO**](#5-polimorfismo-em-poo)

## 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:**

```js
// 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:**

```jsx
// 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:**

```jsx
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 ](https://github.com/he4rt/4noobs) da [He4rt Developers](https://heartdevs.com/), 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](https://github.com/atomotavio/POO4Noobs)💜🤝

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