8

Possuo o seguinte trecho de código:

self.addEventListener('push', event => {"code here"});

Minha dúvida é... esse formato de escrita é igual a:

self.addEventListener('push', function(event) {"code here"});

E se não for, qual a diferença?

Muito obrigado!

1

2 Respostas 2

3

Arrow Function pertence ao ECMAScript 2015, possui uma sintaxe mais curta e vincula o valor this de maneira léxica.

Uma expressão arrow function possui uma síntaxe mais curta quando comparada com expressões de função (function expressions) e vincula o valor de this de maneira léxica. Arrow functions sempre são anônimas.

Exemplo:

var a = [
  "Hidrogenio",
  "Helio",
  "Litio",
  "Berilio"
];

var a2 = a.map(function(s){ return s.length });

var a3 = a.map( s => s.length );

Nota para a ausência do return na segunda função.

Antes das arrow functions toda função definia seu próprio valor this. Este comportamento é importuno com um estilo de programação orientado a objeto.

Nessa documentação é possível encontrar mais exemplos entre os dois tipos.

2

Há diferênças na maneira de funcionar, para além do aspeto.

() => {} é uma função flecha (arrow function) e corre sempre no contexto que tiver sido chamada. Não aceita .bind, .call, .apply ou outras maneiras de impôr um contexto de execução.

No caso do teu código, um auscultador de evento, a diferênça é grande pois o this normalmente é o elemento que recebeu o .addEventListener e essa é a maneira de distinguir do event.target que é perdido com event => {}.

Repara neste exemplo (jsFiddle):

var div = document.querySelector('div');
var info = document.querySelector('#info');

div.addEventListener('click', function(e){
	info.innerHTML += ['legacy', this, e.target.tagName, '<br>'].join(' ');
});
div.addEventListener('click', e => {
	info.innerHTML += ['arrow', this, e.target.tagName, '<br>'].join(' ');
});
<div>
    <button type="button">Clica-me!</button>
</div>
<p id="info"></p>

Nestes casos o this comporta-se de maneira bem diferente.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .