Entendo classes em JavaScript

Caio Granero
3 min readJul 19, 2018

--

Se você tem trabalhado na área de desenvolvimento web nos últimos anos, deve ter ouvido comentários de agora JavaScript tem suporte nativo a Classes. Bom, tudo começou com o ECMAScript 6, antes dele esse artigo não fazia o menor sentido e já que ele é tão importante, vale uma revisão do que foi o ECMA6.

Fluxo de leitura

ECMAScript 6

Resumidamente é apenas uma versão do JavaScript lançada em 2015.

Essa nova versão do JavaScript trouxe diversas novas funcionalidades que auxiliam no desenvolvimento de aplicações mais complexas, uma vez que se houve um aumento no interesse por desenvolver aplicações com Node.js.

Como se pode observar no gráfico de quantidade de busca pelo termo Node.js no Google o ponto mais alto de busca foi em 2014, véspera do lançamento oficial do ECMA 6 e tem se mantido em alta desde então.

Classes

Pergunta: Então quer dizer que antes do ECMA6 não era possível aplicar um comportamento de classes em JavaScript?

Resposta: Sim, era possível!

Simulando uma classe com prototype

Bom, antes do ECMA6 era possível simular o comportamento de uma classe usando o prototype.

Prototype

Basicamente prototype é um objeto dentro do objeto que você está utilizando e esse objeto também contém o seu próprio prototype e assim por diante.

Como podem ver, ao invés de trabalhar diretamente com classes, utilizavamos funções e definíamos métodos para elas. Para quem está aprendendo, se torna um pouco mais complexo já que o conceito de classe está abstraído no prototype. Entretanto, ao fim se utilizava da mesma forma que se fosse uma classe, instanciando um novo objeto e chamando seus métodos.

Declarando uma classe pós ECMA6

Ao invés de criarmos explicitamente uma function, declaramos uma Class, de forma muito mais simples.

Vale notar que tanto o utilizando a keyword class ou a keyword function, ao executarmos o typeof(User) ambos retornam como resultado function . Confirmando que por trás da keyword class nada mais é que a implementação de uma função da forma antiga.

Heranças

Com a chegada das classes no JavaScript, também vieram algumas outras funcionalidades desse tipo muito conhecido no universo da programação orientada a objetos. Uma delas é a Herança.

A implementação da Herança em JavaScript é com a keyword extends. Da mesma forma que se utiliza em Java.

Getter / Setter

Diferente de algumas linguagens de programação, JavaScript decidiu fornecer uma nomenclatura específica para declarar getters e setters.

Note que os métodos getters e setters são acessados como se fossem atributos da classe e não métodos propriamente, um comportamento diferente do que estamos acostumados.

Métodos estáticas

Outra das novas funcionalidades são os métodos estáticos das classes. Simplesmente utilizando a tag static antes do método ele já se torna estático.

Bom, essas são só algumas funções que vieram com o ECMA6 e especificamente utilizadas juntamente com as Classes em JavaScript. O site http://es6-features.org/ contém descrições sobre todas as novas funcionalidades dessa versão.

O que achou? Curtiu? Dá aquele like e deixa um comentário :)

--

--