Skip to main content
3 de 5
adicionou 573 caracteres ao conteúdo
Gabriel Katakura
  • 1,9mil
  • 8
  • 11

Como notei que não explicaram a diferença entre () => {} para function() {}, então apesar de haver uma resposta marcada como correta, vou explicar está diferença.

Primeiramente é muito comum achar que ambos os códigos são equivalentes, já que o ES6 trouxe diversos syntax sugar para deixar o código mais legível e conciso, as arrow functions são normalmente confundidas com as functions do ES5. Mas indo direto ao ponto existem quatro diferenças entre ambos os códigos:

Contexto

Arrow functions possuem this léxico enquanto o modelo normal possui this dinâmico. Isso significa que arrow functions herdam o contexto local de onde foi declarado, enquanto o modelo normal possui o contexto associado ao objeto que ele está vinculado no momento da chamada (se ele não estiver associado a ninguém na chamada, ele assumirá this automaticamente como o contexto global, que no caso dos navegadores é window)

var normal = function() {
  return this === obj;
};

var arrow = () => {
  return this === window;
};

var obj = { normal: normal, arrow: arrow };

obj.normal(); // true
obj.arrow(); // true

normal(); // false

Constructor

Arrow functions não podem ser constructors, então não é possível usar o operador new com a mesma.

var Normal = function() {};
var Arrow = () => {};

new Normal(); // Normal {}
new Arrow(); // Arrow is not a constructor

Arguments

Arrow functions não possui o objeto array-like arguments.

var noop = () => {
  return arguments;
}

noop(); // ReferenceError: arguments is not defined

Nome de função

Expressões de função podem ser nomeadas, isso é útil em alguns cenários que envolvem recursão e para em casos de exceção fica mais fácil de rastrear o código, visto que o nome da função é usado na pilha de exceção mostrada ao desenvolvedor. Só que Arrows Functions não podem ser nomeadas.

var fn = function nome() {};
fn.name; // nome

O que seria um modelo equivalente de () => {} então?

Ignorando o caso de que arrow functions não podem ser usadas como constructors, não recebem arguments e não podem ter nomes (ou seja, 75% das diferenças), o modelo mais equivalente entre arrow functions e funções tradicionais seria este:

(() => { /* code */ })
(function() { /* code */ }).bind(this)

Neste caso o code pode ser exatamente o mesmo entre os dois modelos e eles irão funcionar exatamente igual. Mas claro, existem outras maneiras de simular o comportamento das arrow functions. Um deles é armazenar o contexto this em uma variável e usar essa variável na função tradicional em vez do seu próprio this, o que as outras respostas mostraram.

Gabriel Katakura
  • 1,9mil
  • 8
  • 11