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
, arguments
e 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 this
earguments
As funções de seta não têm suas próprias this
ou arguments
vinculativas. 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 this
e arguments
referir-se aos valores this
e arguments
no 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, this
refere-se ao objeto que foi criado dentro do createObject
. No caso função seta, this
refere-se a this
decreateObject
si.
Isso torna as funções de seta úteis se você precisar acessar o this
ambiente 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 this
com .bind
ou .call
.
Se você não conhece muito bem this
, considere ler
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.
class
construtores 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
this
ou 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 this
para 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 class
com 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 this
estiver 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 this
um 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:
Mais recursos: