DEV Community

Cover image for Descomplicando Programação Orientada a Objetos (POO) com maizena e JavaScript
Leonardo Rafael Dev
Leonardo Rafael Dev

Posted on

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

Índice

  1. Prólogo
  2. O que é POO?
  3. O que são objetos?
  4. Herança 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:

// 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();

Enter fullscreen mode Exit fullscreen mode

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();


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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!😶‍🌫️😶‍🌫️

Top comments (31)

Collapse
 
renanvidal profile image
Renan Vidal Rodrigues

Parabéns Leozin, excelente artigo!

Collapse
 
leonardorafaeldev profile image
Leonardo Rafael Dev

valeu renan <3

Collapse
 
yayaflc profile image
Yasmin Felício

Parabéns pelo artigo, muito bom! 👏

Collapse
 
leonardorafaeldev profile image
Leonardo Rafael Dev

obrigado yaya ! tu e incrivel.

Collapse
 
cherryramatis profile image
Cherry Ramatis

Artigo muito bom! Ficou muito bem explicado <3

Collapse
 
leonardorafaeldev profile image
Leonardo Rafael Dev

obg cherry <3

Collapse
 
thalesmengue profile image
thalesmengue

Artigo muito bem elaborado Leonardo, espero que seja o primeiro de muitos, parabéns pela dedicação!

Collapse
 
leonardorafaeldev profile image
Leonardo Rafael Dev

obrigado demais pelo feedback thales <3

Collapse
 
robsongrangeiro profile image
Robson Grangeiro

Muito bom!

Collapse
 
luisnadachi profile image
Nadachi

Curti dms o artigo.

Collapse
 
fernandoandrade profile image
Fernando Andrade • Edited

Arrasou no artigo Leozin, está muito bom, de fácil entendimento e com ótimas analogias.

Collapse
 
leonardorafaeldev profile image
Leonardo Rafael Dev

obrigado pelo apoio e feedback fernandim fico feliz demais <3

Collapse
 
fernando_rodrigues profile image
Fernando

Muito bom :)

Collapse
 
it4lo_dev profile image
Italo

Show demais mano, muito bem elaborado 👏👏👏👏

Collapse
 
leonardorafaeldev profile image
Leonardo Rafael Dev

valeu meu mano italooo <3

Collapse
 
dantas profile image
Gustavo

Perfeito, muito bem explicado!!

Collapse
 
orionth1 profile image
Matheus Emanoel

Incrível!

Collapse
 
marcelomagal profile image
oChefDev

Muito bom, gostei!

Collapse
 
lliw profile image
William Rodrigues

Sensacional!

Collapse
 
pdrolucas profile image
Pedro Lucas

Boa primo

Collapse
 
phenriquesousa profile image
Pedro Henrique

Boa, primo <3