Vamos falar sobre classe?

E ae galera… Como vocês estão?

O assunto de hoje causa muita polêmica e indignação, talvez eu esteja exagerando um pouco, mas tem um fundo de verdade. Como falamos em post anteriores, tudo no Javascript é função, inclusive as classes. Por isso, quando alguém vem de uma linguagem OO para o JS, sente a diferença de uma linguagem funcional e a forma como a classe se comporta é diferente.

Quando vamos falar de classes é importante ter em mente duas coisas, a importância de objetos para o JS e a possibilidade de fazer herança de forma mais simples, sem a necessidade do uso do prototype. Proto o quê? Calma, galera… Em breve vamos abordar a herança por protótipo, o famoso e temido prototype. Mas não podemos esquecer que apesar da escrita ser diferente, mais simples como tudo no ES6, por baixo dos panos, tudo continua como função e como prototype. A facilidade de escrever o código, não muda o seu core, apenas facilita a vida do desenvolvedor.

Vamos fazer um exemplo para simplificar tudo o que estou falando. Vou criar duas classes para simular um sistema financeiro. Será uma classe dos lancamentos financeiros e outra classe com os ciclos.

Captura de Tela 2018-04-07 às 8.16.40 AM

Na criação das classes não temos nenhuma grande novidade, além claro do nome class, que é apalavra reservada para a criação de classes no JS. O constructor é uma função construtora, como o nome mesmo diz, e já falamos sobre elas. O forEach é um método auxiliar de array, que também já falamos sobre ele, usamos um operador rest como parâmetro da função addLancamento. Ou seja, estamos vendo aqui um apanhado geral de tudo que já vimos no blog.

Mas caso alguém não tenho compreendido o que foi feito até agora vamos explicar. A classe Lancamento recebe dois parâmetros, nome e valor, onde vamos colocar o nome do lançamento e seu respectivo valor. Para evitar possíveis erros, deixamos valores padrões para esses parâmetros. Na classe CicloFinanceiro vamos receber o mês e o ano do lançamento, por isso dentro do construtor dela temos um array vazio de lançamentos. A classe tem o método de adicionar um novo lançamento, esse método é responsável por receber uma quantidade indeterminada de parâmetros, por isso usamos o rest, ele vai percorrer esse array (o array criado pelo operador rest) e vai ser adicionado ao array lacamentos.

Vamos criar outro método para somar todos os valores dos lançamentos, sejam eles positivos no caso dos créditos, como negativo no caso dos débitos.

Captura de Tela 2018-04-07 às 8.29.38 AM.png

Vamos testar? Vamos criar um crédito e um débito e um ciclo financeiro.

Captura de Tela 2018-04-07 às 8.35.18 AM.png

Beleza Marcus… Falou de classe, e ficou claro… Mas e a herança? Cadê ela?

Calma… Vamos dar um exemplo bem simples de herança e para isso vamos criar um novo exemplo. Nada melhor que falar de herança dentro de um ciclo hereditário. Na verdade tem, mas minha imaginação não me permite pensar em nada melhor agora.

Vamos criar 3 classes, avó, pai e filho. Para ser algo bem simples vou apenas trabalhar com dois parâmetros e explicar exatamente o que está acontecendo.

Captura de Tela 2018-04-07 às 8.52.19 AM.png

A classe Pai herda da classe Avo, esse extends é a palavra reservada que garante essa herança. Da mesma forma como o Filho herda do Pai. Sendo assim, Filho também herda de Avo. Ficou claro isso?

Vamos instanciar o filho para ver o resultado.

Captura de Tela 2018-04-07 às 8.55.40 AM.png

No filho tem profissão? QUE BRUXARIA É ESSA?

Bem simples, não é Filho um herdeiro de Pai? Pai tem profissão, logo o Filho também terá. Se o filho tiver uma profissão diferente do Pai, seria necessário dentro do construtor de filho ciar a sua profissão e a passar por parâmetro, como não foi feito, Filho herda tudo da classe Pai. Ficou claro como funciona a herança?

Por hoje é isso… Em breve mais novidades no blog. Vamos voltar a falar de mobile, mas com o React Native!!!

Abração!

 

Anúncios

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão /  Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão /  Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão /  Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão /  Alterar )

Connecting to %s