Dê o próximo passo e inicie sua carreira
Dê o próximo passo e inicie sua carreira agora mesmo
4 minutos de leitura
Autor(a)
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Há tempos a criação de classes e objetos em JavaScript tem sido complexa e difícil de entender, isso por conta de não existir uma linha clara dividindo classes de funções e objetos e, com isso, existirem diversas maneiras de se criar estes bem como diversas formas de utilizar praticas de P.O.O. como a herança.
Por estes motivos, o ECMAScript6 (também conhecido como Harmony, ES.next ou ES6) prevê uma nova especificação chamada maximally_minimal_classes, que tem como objetivo uniformizar e simplificar a definição de classes do modo mais minimalista possível.
Atualmente, o modo mais usado para se definir algo parecido com uma classe em JavaScript é utilizando uma função construtora e adicionando funções ao seu protótipo. Confira abaixo como ficaria a representação de uma Pessoa deste modo:
Como se tornar dev Front-End do zero: o guia para começar na programação
Ler mais
React: componentes com Styled Components
Ler mais
Como publicar uma biblioteca de hooks React no npm com Turborepo
Ler mais
var Pessoa = function(nome, email) { this.nome = nome; // verifica se o e-mail foi preenchido if (email) { this.email = email; } }; Pessoa.prototype.fala = function(){ console.log("Olá, meu nome é "+this.nome+" e meu email é "+this.email); };
Note que a sintaxe não é exatamente intuitiva, deste modo você precisaria saber o que é um prototype e que, em JavaScript, uma classe é uma função no final das contas, o que tende a confundir bastante a cabeça de desenvolvedores acostumados com P.O.O.
Agora vamos ver como ficaria uma Pessoa utilizando a nova especificação:
class Pessoa{ constructor(nome, email){ this.nome = nome; // verifica se o e-mail foi preenchido if (email) { this.email = email; } }
fala(){ console.log("Olá, meu nome é "+this.nome+" e meu email é "+this.email); } } var leo = new Pessoa("Leonardo", "[email protected]"); leo.fala(); // Olá, meu nome é Leonardo e meu email é [email protected]
Caso você já programe em uma linguagem orientada a objetos como o Java, essa sintaxe provavelmente será muito mais intuitiva que a anterior.
Um detalhe interessante dessa abordagem é que, apesar de a função fala ser declarada dentro da classe Pessoa, ela será adicionada no prototype da Pessoa, o que pode ser visivelmente mais performático do que adicioná-la diretamente na função.
Apesar de ser muito parecido com Java, essa especificação não adicionará modificadores de acesso, o que significa que todos os atributos ou métodos adicionados à classe serão públicos! Como a própria especificação diz: "private is simply achieved via private name objects".
Além da definição padrão de classes citada acima, também estará disponível uma maneira de criar pseudo-propriedades simplesmente adicionando a palavra get ou set antes do nome da função, assim como você pode fazer em objetos literais. Exemplo:
class Pessoa { constructor(nome, email) { this.nome = nome; this.comidas = \[\]; // verifica se o e-mail foi preenchido if (email) { this.email = email; } }
fala() { console.log("Olá, meu nome é "+this.nome+" e meu email é "+this.email); }
get primeiroNome() { return this.nome.split(" ")\[0\]; }
set gostaDe(comida) { this.comidas.push(comida); } }
var leo = new Pessoa("Leonardo Wolter", "[email protected]"); leo.gostaDe = "bolo"; console.log(leo.comidas); // ```"bolo"
console.log(leo.primeiroNome); // Leonardo
Agora conseguimos criar uma classe com uma sintaxe melhor, legal, mas e as heranças, como ficam?
Atualmente, o modo mais utilizado de se implementar herança é utilizando o Prototype-Chainning. Imagine que temos uma classe PessoaFisica que herda Pessoa. O código seria parecido com este: ```js
var PessoaFisica = function(nome, email, cpf){ Pessoa.call(this, nome, email); this.cpf = cpf; }; PessoaFisica.prototype = new Pessoa(); PessoaFisica.prototype.constructor = PessoaFisica; PessoaFisica.prototype.dizCpf = function(){ console.log(this.cpf); };
Resumindo você precisaria criar uma função construtora com o conteudo adequado, setar o prototype de `PessoaFisica` com uma instancia de `Pessoa`, consertar a propriedade construtor e, por ultimo mas nao menos importante, adicionar as funções específicas sua `PessoaFisica`.
Confira agora como implementaríamos a mesma herança utilizando a nova especificação:
```js
class PessoaFisica extends Pessoa{
constructor(nome, email, cpf){ super(nome, email); this.cpf = cpf; } dizCpf(){ console.log(this.cpf); } }
var leo = new PessoaFisica("Leonardo", "[email protected]", "meucpf" ); leo.gostaDe = "bolo"; console.log(leo.comidas); // ```"bolo"
console.log(leo.idade); // 63 leo.dizCpf(); // "meucpf" leo.fala(); // Olá, meu nome é Leonardo e meu email é [email protected]
Temos como resultado um código mais expressivo e enxuto, apenas utilizamos a palavra-chave extends para dizer que a PessoaFisica herda Pessoa e substituimos a estratégia de Constructor Stealing pelo código super(nome, email)
Legal, e quando eu vou poder usar isso? Atualmente, apenas o traceur-compiler possui suporte a essa nova sintaxe, uma demonstração do código desse post funcionando pode ser vista aqui.
Caso esteja interessado nas outras funcionalidades que serão adicionadas ao Harmony, você pode conferir a tabela de compatibilidade com os browsers, compilers e node aqui.
Avalie este artigo