JavaScript: classes e heranças no desenvolvimento de aplicações com orientação a objetos

Hello POO! - Apresentação

Ana Beatriz (Bia): Olá, eu sou a Ana Beatriz, mas podem me chamar de Bia. Sou instrutora de Front-end aqui na Alura.

Autodescrição da Bia: Mulher de pele morena. Tem cabelos longos e cacheados na cor castanho escuro com pontas mais claras. Tem o rosto redondo, sobrancelhas bem desenhadas, olhos castanhos, nariz médio e lábios grossos. Está usando óculos de lentes transparentes com a armação oval preta e fina. Está usando uma camiseta laranja. No fundo há uma parede lisa, sem decoração e com uma iluminação de cor azul.

Nayanne Batista (Nay): Olá! Eu sou a Nay!

Autodescrição da Nay: Mulher de pele morena. Tem cabelos longos e lisos na cor castanho. Tem o rosto quadrado, sobrancelhas bem desenhadas, olhos castanhos, nariz médio e boca média com um batom marrom claro. Está usando um óculos de lentes transparentes com uma armação também transparente. Está usando uma blusa laranja. O fundo está iluminado por uma luz azul e à esquerda tem uma janela coberta por uma persiana, à direita tem um violão e centralizado há uma estante branca com vários livros.

Junto com a Bia, vou acompanhar vocês ao longo do curso. Com ele vocês aprenderão os pilares da programação orientada a objetos. Vocês entenderão sobre:

• Classes
• Herança
• Encapsulamento
• Polimorfismo
• Composição
• E muito mais.

O melhor de tudo é que utilizarão esses conceitos de forma prática no nosso mais novo projeto: o Devs & Dragons (Devs e Dragões).

Vamos lá!

Hello POO! - Quando usar Classes?

Observação: A instrutora Bia que vai apresentar essa aula.

Estou com o nosso projeto D&D (Devs & Dragons) aberto no VS Code, onde já existem dois objetos criados no index.js: o personagem "Pedrinho" e o personagem "José".

const personagemPedrinho = {
    nome: 'Pedrinho',
    vida: 7,
    mana: 12,
    level: 5,
    tipo: 'Mago',
}

const personagemJose = {
    nome: 'Jose',
    vida: 7,
    mana: 6,
    level: 3,
    tipo: 'Arqueiro',
}

Reparem que eles têm algumas propriedades, que são "nome", "vida", "mana", que é o nível de poder ou de energia do personagem, "level" (nível) e "tipo". Vamos aprender como fazer para criar mais uma personagem.

Na linha 17, codamos const personagemAna = {}, sendo que Ana é o nome que quero dar para essa personagem. Em seguida, dentro das chaves, preenchemos as propriedades da personagemAna.

const personagemAna = {
    nome: 'Ana',
    vida: 8,
    mana: 10
}

Porém imaginem a quantidade de cartas que tem em um baralho de RPG (Role Play Game, traduzido como Jogo de Interpretação de Papéis). Ao pesquisarmos essa informação no Google, descobrimos que no baralho de RPG tem em torno de 52 cartas.

Pensem comigo, se cada objeto representa uma carta de personagem, criar essas personagens uma a uma não seria muito prático, principalmente porque cada personagem possuirá as mesmas propriedades. Para solucionarmos isso, na linha 23 criaremos um modelo contendo todos os dados que são comuns nesses objetos.

//código omitido

class Personagem {
    nome
    vida
    mana
}

Por enquanto vamos deixar nosso modelo dessa forma. Em seguida, comentaremos da linha 1 a linha 7, onde tem o bloco de código do personagem "Pedrinho", usando /* */.

/*const personagemPedrinho = {
    nome: 'Pedrinho',
    vida: 7,
    mana: 12,
    level: 5,
    tipo: 'Mago',
}*/

Depois vamos transformar esse personagem em variável, então vamos selecionar const personagemPedrinho na linha um, pressionar "Ctrl + C", e depois, na linha 29, pressionamos "Ctrl + V". Nós iremos codar que o personagemPedrinho é igual a new Personagem().

const personagemPedrinho = new Personagem()

Feito isso vamos pressionar "Enter" e na linha 30, ao escrevermos personagemPedrinho. aparecem sugestões de autocomplete do VS Code com as propriedades que escrevemos na classe Personagem(). Sendo assim, vamos começar a preencher.

//código omitido

const personagemPedrinho = new Personagem()
personagemPedrinho.nome = 'Pedrinho'
personagemPedrinho.mana = 12
personagemPedrinho.vida = 7

Agora precisamos adicionar novas propriedades do personagem, e para isso precisamos alterar classe Personagem(). Vamos adicionar "level", "tipo" e "descricao", que será a descrição do personagem.

class Personagem {
    nome
    vida
    mana
    level
    tipo
    descricao
}

Agora quando escrevermos, na linha 36, personagemPedrinho. já aparecem as novas propriedades que adicionamos à classe Personagem(). Isso acontece porque declaramos que personagemPedrinho comporta um new Personagem(), ou seja, informamos que a variável personagemPedrinho é uma instância da classe Personagem().

Quando escrevemos class criamos uma classe que é um modelo contendo todas as informações em comum dos objetos que serão criados a partir dela. Portanto criamos uma conexão entre o que a classe tem e o que o objeto terá. A partir da classe, diversos objetos podem ser criados.

Ao deixarmos o mouse sobre Personagem() na linha 32, reparamos que o VS Code informa que ele e um constructor (construtor), utilizado para construir algo, que é exatamente o que estamos fazendo. E isso que nós criamos pode ser facilmente trazido para o mundo real.

Imagine em um sistema de banco termos um classe chamada classeCliente contendo diversas propriedades, como:

• Nome
• CPF
• Agência

A partir da classeCliente é possível criar diversos clientes, então tem as instâncias dos clientes 2000, 2001 e assim por diante. Portanto esse foi o primeiro passo para solucionar a questão de repetição das propriedades que nós começamos a aprender.

Ainda temos muito para evoluir, então vejo vocês no próximo vídeo.

Hello POO! - Import e export

Agora que construímos a classe Personagem(), nesse vídeo vamos organizar a estrutura de classes e arquivos no nosso projeto da maneira que é feito ao utilizarmos esse tipo de modelo de classes.

Para isso acessaremos o Explorador, que é a coluna à esquerda, e dentro da pasta "src" criaremos uma nova pasta. Então clicamos em "src", para encolhê-la, e depois no ícone de uma pasta com um "+" no canto inferior direito. Esse ícone de "Nova pasta" é o segundo da esquerda para direita na parte superior direita do Explorador. Vamos nomear essa pasta como "modules" ("módulos").

Com a pasta "modules" selecionada, criaremos um novo arquivo dentro dela, clicando no primeiro ícone da esquerda para direita na parte superior direita do Explorador. Esse ícone de "Nova arquivo" tem o formato de uma folha com o canto superior direito dobrado e tem um "+" no canto inferior direito. Nomearemos o arquivo como "personage.js".

Retornando ao "src > index.js", apagaremos a linha 36, onde está escrito apenas personagemPedrinho.. Em seguida, vamoms selecionar o bloco da classe Personagem(), da linha 23 a 30, pressionar "Ctrl + X" e vamos colar no arquivo personagem.js.

class Personagem {
    nome
    vida
    mana
    level
    tipo
    descricao
}

Essa forma que nós fizemos é a recomendada pela documentação do MDN. Trata-se de uma boa prática, porque nos últimos anos começaram a pensar em maneiras de melhorar a usabilidade e manutenção do código. Uma das formas a qual chegaram foi a de separar o código em pequenos módulos que só seriam utilizados quando fossem necessários.

Tanto que, no arquivo "index.html", o script da linha 33, que chama o index.js modifica seu type (tipo). Atualmente temos:

<script type="module" src="./src/index.js"></script>

Então temos o type="module" porque a maioria dos navegadores reconhece esse tipo. Porém para o arquivo ser interpretado dessa forma, ele precisa ser do tipo module. Por isso essa modificação.

Agora voltamos para o index.js e, na linha 28, vamos codar:

console.log(personagemPedrinho)

Assim poderemos visualizar esse objeto. Quando acessamos o Console do navegador onde está nossa página, encontramos um erro informando que "Personagem is not defined" ("Personagem não está definido"), e que esse erro está acontecendo na linha 23 do "index.js". Portanto é justamente na linha onde o new Personagem() parou de funcionar.

Para resolver isso, voltaremos para o arquivo "personagem.js" e na linha 1, antes de class Personagem {}, escreveremos export.

export class Personagem {
    /*código omitido*/

De volta ao "index.js", clicaremos no começo da linha 1 e pressionaremos "Enter" duas vezes para descer o código comentado para linha 3. Depois voltaremos à linha 1 para fazer a importação da classe Personagem.

import { Personagem } from "./modules/personagem.js"

/*const personagemPedrinho = {
    nome: 'Pedrinho',
    vida: 7,
    mana: 12,
    level: 5,
    tipo: 'Mago',
}*/

/*código omitido*/

Percebam que ao escrevermos import { Personagem }, a importação se autocompleta, mas é importante que o endereço de onde está sendo importado termine em personagem.js. O .js é muito importante, ou a importação não irá funcionar.

Vamos salvar o código e, ao retornarmos para o Console do navegador, observamos que a instância personagemPedrinho voltou a funcionar. Sendo assim, recebemos várias informações de personagemPedrinho.

Personagem {nome: 'Pedrinho', vida: 7, mana: 12, level: undefined, tipo: undefined, ...}

descricao: undefined

level: undefined

mana: 12

nome: "Pedrinho"

tipo: undefined

vida: 7

[[Prototype]]: Object

As propriedades de nome, vida e mana estão preenchidas, e as propriedades que não atribuímos valor está como undefined (indefinido). Além disso, conseguimos visualizar na primeira linha que personagemPedrinho é uma instância da classe Personagem.

Essa ação que nós precisamos fazer de import e export foi porque o script que criamos, que é um módulo, depende dessas palavras reservadas. Basicamente o export (exportar) envia o pedaço de código para algum lugar e o import (importar) busca esse código que foi enviado.

Agora que nosso projeto está devidamente organizado, vamos evoluir ainda mais essa classe personagem.

Sobre o curso JavaScript: classes e heranças no desenvolvimento de aplicações com orientação a objetos

O curso JavaScript: classes e heranças no desenvolvimento de aplicações com orientação a objetos possui 89 minutos de vídeos, em um total de 45 atividades. Gostou? Conheça nossos outros cursos de JavaScript em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Hello POO!
• Constructor e Renderização
• Fundamentos da POO
• Static
• Encapsulamento