¿Son las 'Funciones de flecha' y las 'Funciones' equivalentes / intercambiables?
Las funciones de flecha en ES2015 proporcionan una sintaxis más concisa.
- ¿Puedo reemplazar todas mis declaraciones / expresiones de función con funciones de flecha ahora?
- ¿Qué tengo que tener en cuenta?
Ejemplos:
Función constructora
function User(name) {
this.name = name;
}
// vs
const User = name => {
this.name = name;
};
Métodos de prototipos
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: () => {
// ...
}
};
Devoluciones de llamada
setTimeout(function() {
// ...
}, 500);
// vs
setTimeout(() => {
// ...
}, 500);
Funciones variadas
function sum() {
let args = [].slice.call(arguments);
// ...
}
// vs
const sum = (...args) => {
// ...
};
Respuestas
tl; dr: ¡No! Las funciones de flecha y las declaraciones / expresiones de función no son equivalentes y no se pueden reemplazar a ciegas.
Si la función que desea reemplazar no no usar this
, arguments
y no se llama con new
, entonces sí.
Como tantas veces: depende . Las funciones de flecha tienen un comportamiento diferente al de las declaraciones / expresiones de funciones, así que primero echemos un vistazo a las diferencias:
1. Léxico this
yarguments
Funciones de dirección no tienen su propio this
o arguments
de unión. En cambio, esos identificadores se resuelven en el ámbito léxico como cualquier otra variable. Eso significa que dentro de una función de flecha, this
y se arguments
refieren a los valores de this
y arguments
en el entorno en el que se define la función de flecha (es decir, "fuera" de la función de flecha):
// 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
En el caso de la expresión de función, se this
refiere al objeto que se creó dentro de createObject
. En el caso la función de flecha, this
se refiere a this
de createObject
sí mismo.
Esto hace que las funciones de flecha sean útiles si necesita acceder al this
entorno actual:
// currently common pattern
var that = this;
getData(function(data) {
that.data = data;
});
// better alternative with arrow functions
getData(data => {
this.data = data;
});
Tenga en cuenta que esto también significa que no es posible configurar una función de flecha this
con .bind
o .call
.
Si no está muy familiarizado this
, considere leer
2. Las funciones de flecha no se pueden llamar con new
ES2015 distingue entre funciones que se pueden llamar y funciones que se pueden construir . Si una función es construible, se puede llamar con new
, es decir new User()
. Si una función es invocable, se puede llamar sin new
(es decir, llamada de función normal).
Las funciones creadas a través de declaraciones / expresiones de función son tanto construibles como invocables.
Las funciones (y métodos) de flecha solo se pueden llamar.
class
los constructores solo son construibles.
Si está intentando llamar a una función no invocable o construir una función no construible, obtendrá un error de tiempo de ejecución.
Sabiendo esto, podemos afirmar lo siguiente.
Reemplazable:
- Funciones que no usan
this
oarguments
. - Funciones que se utilizan con
.bind(this)
No reemplazable:
- Funciones de constructor
- Función / métodos agregados a un prototipo (porque generalmente usan
this
) - Funciones variadas (si usan
arguments
(ver más abajo))
Echemos un vistazo más de cerca a esto usando sus ejemplos:
Función constructora
Esto no funcionará porque las funciones de flecha no se pueden llamar con new
. Siga usando una declaración / expresión de función o use class
.
Métodos de prototipos
Lo más probable es que no, porque los métodos de prototipo suelen utilizarse this
para acceder a la instancia. Si no lo usan this
, puede reemplazarlo. Sin embargo, si le interesa principalmente la sintaxis concisa, utilícela class
con su sintaxis de método concisa:
class User {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
}
Métodos de objeto
De manera similar para los métodos en un objeto literal. Si el método quiere hacer referencia al objeto en sí a través de this
, siga usando expresiones de función o use la nueva sintaxis del método:
const obj = {
getName() {
// ...
},
};
Devoluciones de llamada
Depende. Definitivamente debe reemplazarlo si está creando un alias en el exterior this
o está usando .bind(this)
:
// old
setTimeout(function() {
// ...
}.bind(this), 500);
// new
setTimeout(() => {
// ...
}, 500);
Pero: si el código que llama a la devolución de llamada se establece explícitamente this
en un valor específico, como suele ser el caso de los controladores de eventos, especialmente con jQuery, y la devolución de llamada usa this
(o arguments
), ¡ no puede usar una función de flecha!
Funciones variadas
Dado que las funciones de flecha no tienen las suyas propias arguments
, no puede simplemente reemplazarlas con una función de flecha. Sin embargo, ES2015 introduce una alternativa al uso arguments
: el parámetro rest .
// old
function sum() {
let args = [].slice.call(arguments);
// ...
}
// new
const sum = (...args) => {
// ...
};
Pregunta relacionada:
- ¿Cuándo debo usar las funciones de flecha en ECMAScript 6?
- ¿Las funciones de flecha de ES6 tienen sus propios argumentos o no?
- ¿Cuáles son las diferencias (si las hay) entre las funciones de flecha de ES6 y las funciones vinculadas con Function.prototype.bind?
- ¿Cómo usar las funciones de flecha (campos de clase pública) como métodos de clase?
Recursos adicionales:
Funciones de flecha => la mejor característica de ES6 hasta ahora. Son una adición tremendamente poderosa a ES6, que uso constantemente.
Espere, no puede usar la función de flecha en todas partes de su código, no funcionará en todos los casos, como this
cuando las funciones de flecha no se pueden usar. Sin lugar a dudas, la función de flecha es una gran adición que aporta simplicidad al código.
Pero no puede usar una función de flecha cuando se requiere un contexto dinámico: definir métodos, crear objetos con constructores, obtener el objetivo de esto al manejar eventos.
Las funciones de flecha NO deben usarse porque:
Ellos no tienen
this
Utiliza "alcance léxico" para determinar cuál
this
debería ser el valor de " ". En el ámbito léxico de palabras simples, utiliza “this
” desde el interior del cuerpo de la función.Ellos no tienen
arguments
Las funciones de flecha no tienen un
arguments
objeto. Pero la misma funcionalidad se puede lograr usando parámetros de descanso.let sum = (...args) => args.reduce((x, y) => x + y, 0)
sum(3, 3, 1) // output - 7
'No se pueden usar con
new
Las funciones de flecha no pueden ser constructoras porque no tienen una propiedad de prototipo.
Cuándo usar la función de flecha y cuándo no:
- No use para agregar función como una propiedad en el objeto literal porque no podemos acceder a esto.
- Las expresiones de función son las mejores para los métodos de objeto. Arrow funciones son las mejores para las devoluciones de llamada o métodos como
map
,reduce
oforEach
. - Use declaraciones de función para funciones que llamaría por su nombre (porque están elevadas).
- Utilice funciones de flecha para devoluciones de llamada (porque tienden a ser más tersas).
Para usar las funciones de flecha function.prototype.call
, hice una función auxiliar en el prototipo del 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
NO NECESITA un ayudante. Podrías hacerlo:
var obj = {f:3, a:2}
(This => This.f + This.a).call(undefined, obj); // 5