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 duas 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
O que seria um modelo equivalente de () => {}
então?
Ignorando o caso de que arrow functions
não podem ser usadas como constructors
, 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.