As funções de seta no ES2015 fornecem uma sintaxe mais concisa.

• Posso substituir todas as minhas declarações / expressões de funções por funções de seta agora?
• O que eu tenho que procurar?

Exemplos:

Função construtora

function User(name) {
  this.name = name;
}

// vs

const User = name => {
  this.name = name;
};

Métodos de protótipo

User.prototype.getName = function() {
  return this.name;
};

// vs

User.prototype.getName = () => this.name;

Métodos de objeto (literal)

const obj = {
  getName: function() {
    // ...
  }
};

// vs

const obj = {
  getName: () => {
    // ...
  }
};

Retornos de chamada

setTimeout(function() {
  // ...
}, 500);

// vs

setTimeout(() => {
  // ...
}, 500);

Funções variáveis

function sum() {
  let args = [].slice.call(arguments);
  // ...
}

// vs
const sum = (...args) => {
  // ...
};

tl; dr: Não! As funções de seta e as declarações / expressões de função não são equivalentes e não podem ser substituídas às cegas.
Se a função que deseja substituir se não usar this, argumentse não é chamado com new, então sim.

Como tantas vezes: depende . As funções de seta têm um comportamento diferente das declarações / expressões de função, então vamos dar uma olhada nas diferenças primeiro:

1. Lexical thisearguments

As funções de seta não têm suas próprias thisou argumentsvinculativas. Em vez disso, esses identificadores são resolvidos no escopo lexical como qualquer outra variável. Isso significa que dentro de uma função de seta thise argumentsreferir-se aos valores thise argumentsno ambiente em que a função de seta é definida (ou seja, "fora" da função de seta):

// Example using a function expression
function createObject() {
  console.log('Inside `createObject`:', this.foo);
  return {
    foo: 42,
    bar: function() {
      console.log('Inside `bar`:', this.foo);
    },
  };
}

createObject.call({foo: 21}).bar(); // override `this` inside createObject

// Example using a arrow function
function createObject() {
  console.log('Inside `createObject`:', this.foo);
  return {
    foo: 42,
    bar: () => console.log('Inside `bar`:', this.foo),
  };
}

createObject.call({foo: 21}).bar(); // override `this` inside createObject

No caso de expressão de função, thisrefere-se ao objeto que foi criado dentro do createObject. No caso função seta, thisrefere-se a thisdecreateObject si.

Isso torna as funções de seta úteis se você precisar acessar o thisambiente atual:

// currently common pattern
var that = this;
getData(function(data) {
  that.data = data;
});

// better alternative with arrow functions
getData(data => {
  this.data = data;
});

Observe que isso também significa que não é possível definir uma função de seta thiscom .bindou .call.

Se você não conhece muito bem this, considere ler

• MDN - este
• YDKJS - protótipos deste e de objeto

2. As funções de seta não podem ser chamadas com new

O ES2015 distingue entre funções que são chamadas e funções que são construídas . Se uma função é construtível, pode ser chamada com new, ie new User(). Se uma função puder ser chamada, ela poderá ser chamada sem new(ou seja, chamada de função normal).

Funções criadas através de declarações / expressões de função são construtíveis e chamadas.
As funções de seta (e métodos) só podem ser chamadas. classconstrutores são apenas construtíveis.

Se você estiver tentando chamar uma função não exigível ou construir uma função não construtível, receberá um erro de tempo de execução.

Sabendo disso, podemos afirmar o seguinte.

Substituível:

• Funções que não usam thisou arguments.
• Funções que são usadas com .bind(this)

Não substituível:

• Funções de construtor
• Função / métodos adicionados a um protótipo (porque eles geralmente usam this)
• Funções variáveis ​​(se elas usarem arguments(veja abaixo))

Vamos dar uma olhada mais de perto usando seus exemplos:

Função construtora

Isso não funcionará porque as funções de seta não podem ser chamadas com new. Continue usando uma declaração / expressão de função ou use class.

Métodos de protótipo

Provavelmente não, porque os métodos de protótipo geralmente usam thispara acessar a instância. Se eles não usarem this, você poderá substituí-lo. No entanto, se você se preocupa principalmente com a sintaxe concisa, use classcom a sintaxe concisa do método:

class User {
  constructor(name) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}

Métodos de objeto

Da mesma forma para métodos em um literal de objeto. Se o método quiser fazer referência ao próprio objeto via this, continue usando expressões de função ou use a nova sintaxe do método:

const obj = {
  getName() {
    // ...
  },
};

Retornos de chamada

Depende. Você definitivamente deve substituí-lo se thisestiver usando o alias externo ou estiver usando .bind(this):

// old
setTimeout(function() {
  // ...
}.bind(this), 500);

// new
setTimeout(() => {
  // ...
}, 500);

Mas: se o código que chama o retorno de chamada definir explicitamente thisum valor específico, como geralmente ocorre com os manipuladores de eventos, especialmente com o jQuery, e o retorno de chamada usar this(ou arguments), você não poderá usar uma função de seta!

Funções variáveis

Como as funções de seta não têm suas próprias arguments, você não pode simplesmente substituí-las por uma função de seta. No entanto, o ES2015 apresenta uma alternativa ao uso arguments: o parâmetro rest .

// old
function sum() {
  let args = [].slice.call(arguments);
  // ...
}

// new
const sum = (...args) => {
  // ...
};

Pergunta relacionada:

• Quando devo usar as funções de seta no ECMAScript 6?
• As funções de seta do ES6 têm seus próprios argumentos ou não?
• Quais são as diferenças (se houver) entre as funções de seta do ES6 e as funções associadas ao Function.prototype.bind?
• Como usar as funções de seta (campos de classe pública) como métodos de classe?

Mais recursos:

• MDN - Funções de seta
• YDKJS - Funções de seta

As funções de seta => melhor recurso do ES6 até agora. Eles são uma adição tremendamente poderosa ao ES6, que eu uso constantemente.

Espere, você não pode usar a função de seta em qualquer lugar do código, isso não funcionará em todos os casos, como this onde as funções de seta não são utilizáveis. Sem dúvida, a função de seta é um ótimo complemento, traz simplicidade de código.

Mas você não pode usar uma função de seta quando um contexto dinâmico é necessário: definir métodos, criar objetos com construtores, obter o objetivo disso ao manipular eventos.

As funções de seta NÃO devem ser usadas porque:

1. Eles não tem this

   Ele usa o "escopo lexical" para descobrir qual thisdeve ser o valor de " ". No escopo lexical de palavras simples, ele usa “ this” de dentro do corpo da função.

2. Eles não tem arguments

   As funções de seta não têm um argumentsobjeto. Mas a mesma funcionalidade pode ser alcançada usando os parâmetros de descanso.

   let sum = (...args) => args.reduce((x, y) => x + y, 0) sum(3, 3, 1) // output - 7 `

3. Eles não podem ser usados ​​com new

   As funções de seta não podem ser construtoras porque não possuem uma propriedade prototype.

Quando usar a função de seta e quando não:

1. Não use para adicionar a função como uma propriedade no literal do objeto, porque não podemos acessar isso.
2. Expressões de função são melhores para métodos de objeto. Arrow funções são melhores para callbacks ou métodos como map, reduceou forEach.
3. Use declarações de função para funções que você chamaria pelo nome (porque são içadas).
4. Use as funções de seta para retornos de chamada (porque eles tendem a ser mais tersos).

Para usar as funções de seta function.prototype.call, criei uma função auxiliar no protótipo de objeto:

  // Using
  // @func = function() {use this here} or This => {use This here}
  using(func) {
    return func.call(this, this);
  }

uso

  var obj = {f:3, a:2}
  .using(This => This.f + This.a) // 5

Editar

Você não precisa de um ajudante. Você poderia fazer:

var obj = {f:3, a:2}
(This => This.f + This.a).call(undefined, obj); // 5