Classes Javascript e arrow functions: usando ES6

O JavaScript, criado em meados dos anos 90, ainda prospera hoje. Existem subconjuntos, superconjuntos, versões atuais e a versão mais recente, ES6, que traz uma variedade de novos recursos, como classes, arrow-functions e módulos.

As classes são um novo recurso do ES6, usado para descrever o “esqueleto” de um objeto e tornar o modelo de abstração EcmaScript mais parecido com uma linguagem tradicional baseada em classe.

class Carro{
cor: string; // atributo de classe do tipo string
  constructor() {
// bloco de código do construtor da classe
}
  acelerar() {
// bloco de código do método da classe
}
}

Para referenciar o contexto corrente de classe, usamos a palavra reservada this.

Objetos

Objetos são instâncias de uma classe, criadas a partir do operador new. Podemos fazer uma analogia: a classe é uma receita de bolo e um bolo é um objeto criado a partir daquela classe.

let carro = new Carro();
carro.cor = "verde";
carro.acelerar();

No exemplo acima, criamos uma instância (objeto) da classe Carro, atribuímos um valor para o atributo cor e chamamos o método acelerar.

Para acessar atributos (características) e métodos (comportamentos, ações) de um objeto, usamos a notação ponto (dot notation). Repare o ponto entre o nome do objeto e o nome do atributo e entre o nome do objeto e o nome do método: isso é o que chamamos de dot notation.

A palavra-chave this

Em uma classe JavaScript, usamos a palavra-chave this para nos referirmos à própria instância da classe. Por exemplo:

class Carro{
...
  aumentarVelocidade(quantidade: int){
// bloco de código do método
}
  acelerar() {
this.aumentarVelocidade(10);
}
}

No exemplo acima, a palavra this refere-se à instância de classe. Para que o contexto de classe não seja confundido com um outro contexto de método dentro dessa classe, o ES6 introduziu as arrow functions, mantendo a consistência da referência this.

Essa consistência poderia ser quebrada se usássemos a declaração tradicional de funções dentro de uma classe, pois o this iria se referir ao escopo dessa função e não ao escopo de classe. Para ilustrar, considere o seguinte trecho de código:

class Exemplo{
notificar() {
...
}
   buscarDados() {
acessarServidor(function retorno(erro, dados) {
this.notificar(); // isso não funciona!
});
}
}

No caso acima, this não irá apontar para o objeto esperado: no modo “estrito” this será indefinido. Com o uso de arrow functions, this irá apontar para a instância da classe. Reescrevendo o exemplo acima, temos:

class Exemplo{
notificar() {
...
}
   buscarDados() {
acessarServidor((erro, dados) => {
this.notificar(); // referencia a instancia de Exemplo
});
}
}

Note que a palavra “function” foi suprimida na declaração da função, além do próprio nome dela (retorno), com a adição do operador => (fat arrow). Isso é o que chamamos de funções anônimas no ES6.

Quando this é usado dentro de uma função anônima, o JavaScript usa o this do escopo externo (de classe).

Gostou da explicação? Curta e compartilhe!

Like what you read? Give Adson Rocha a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.