Funções de seta – ES6 e CoffeeScript

<b> Funções de seta plana e fina do CoffeeScript </b>

No CoffeeScript, existem dois tipos diferentes de setas para definir funções: setas finas -> e setas grandes =>. A palavra-chave da função JavaScript foi substituída pela seta fina. A seta grande serve como palavra-chave de função e também vincula a função ao contexto atual.

Este exemplo de estouro de pilha mostra a diferença entre os dois.

class A
  constructor: (@msg) ->
  thin: -> alert @msg
  fat:  => alert @msg

x = new A("yo")
x.thin() #alerts "yo"
x.fat()  #alerts "yo"

fn = (callback) -> callback()

fn(x.thin) #alerts "undefined"
fn(x.fat)  #alerts "yo"

<b> Funções de seta EcmaScript 6 </b>

As funções de seta que foram propostas para o ES6, fornecem os mesmos dois recursos das funções de seta grande no CoffeeScript: escopo léxico <i> this </i> e sintaxe mais limpa ao definir uma função anônima. Neste estágio, as funções de seta são implementadas apenas no Firefox 22, verifique aqui a compatibilidade do navegador

<b> Sintaxe da função anônima ES5 </b>

var x = [0,1,2];
x.map(function (x) { 
  console.log(x * x);
});

<b> Função de seta ES6 </b>

let x = [0,1,2];
x.map(x => console.log(x * x));

<b> Objeto de função com método anônimo </b>

function Person() {
  var self = this;
  self.age = 0;

  setInterval(function growUp() {
    self.age++;
  }, 1000);
}

<b> Objeto de função com método de função de seta </b>

function Person(){
  this.age = 0;

  setInterval(() => {
    // this is lexically scoped
    this.age++; 
  }, 1000);
}

Para mais informações e exemplos sobre as funções das setas, verifique o Mozilla