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 prototipo
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) => {
// ...
};
javascript
ecmascript-6
arrow-functions
Felix Kling
fuente
fuente
this
estimesCalled
incrementos muy diferentes solo por 1 cada vez que se llama al botón. Lo que responde a mi pregunta personal:.click( () => { } )
y.click(function() { })
ambos crean la misma cantidad de funciones cuando se usan en un bucle como se puede ver en el conteo Guid en Plnkr.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 connew
, entonces sí.Como tan a menudo: depende . Las funciones de flecha tienen un comportamiento diferente que las declaraciones / expresiones de función, así que echemos un vistazo a las diferencias primero:
1. Lexical
this
yarguments
Las funciones de flecha no tienen sus propias
this
oarguments
vinculantes. 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 searguments
refieren a los valores dethis
yarguments
en el entorno, la función de flecha se define en (es decir, "fuera" de la función de flecha):En el caso de expresión de función, se
this
refiere al objeto que se creó dentro decreateObject
. En el caso la función de flecha,this
se refiere athis
decreateObject
sí mismo.Esto hace que las funciones de flecha sean útiles si necesita acceder al
this
entorno actual:Tenga en cuenta que esto también significa que no es posible establecer una función de flecha
this
con.bind
o.call
.Si no está muy familiarizado
this
, considere leer2. Las funciones de flecha no se pueden invocar 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 decirnew User()
. Si una función es invocable, se puedenew
invocar sin ella (es decir, llamada a función normal).Las funciones creadas a través de declaraciones / expresiones de funciones son tanto construibles como invocables.
Las funciones de flecha (y métodos) solo son invocables.
class
Los constructores son solo 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 decir lo siguiente.
Reemplazable:
this
oarguments
..bind(this)
No reemplazable:
this
)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 invocar con
new
. Siga usando una declaración / expresión de función o usoclass
.Métodos prototipo
Lo más probable es que no, porque los métodos prototipo generalmente se usan
this
para acceder a la instancia. Si no lo usanthis
, puede reemplazarlo. Sin embargo, si le interesa principalmente la sintaxis concisa, useclass
con su sintaxis de método conciso:Métodos de objeto
Del mismo modo para los métodos en un objeto literal. Si el método quiere hacer referencia al objeto en sí mismo
this
, siga usando expresiones de función o use la nueva sintaxis del método:Devoluciones de llamada
Depende. Definitivamente deberías reemplazarlo si estás aliasando el exterior
this
o estás usando.bind(this)
: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 con los controladores de eventos, especialmente con jQuery, y la devolución de llamada usathis
(oarguments
), ¡ 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 presenta una alternativa al usoarguments
: el parámetro rest .Pregunta relacionada:
Recursos adicionales:
fuente
this
también afectasuper
y que no tienen.prototype
.AssignmentExpression
) no se puede soltar en todas partes, una expresión de función (PrimaryExpression
) puede y hace que las personas se activen con bastante frecuencia (especialmente porque ha habido un análisis) errores en las principales implementaciones de JS).() => {}()
) o hacer algo comox || () => {}
. A eso me refiero: errores de tiempo de ejecución (análisis). (Y aunque ese es el caso, con bastante frecuencia las personas piensan que el error es un error). ¿Está tratando de cubrir los errores lógicos que pasarían desapercibidos porque no necesariamente se producen errores al analizarlos o ejecutarlos?new
'uno es un error de tiempo de ejecución ¿verdad?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 son utilizables. Sin lugar a dudas, la función de flecha es una gran adición que aporta simplicidad de 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 cuando se manejan eventos.
Las funciones de flecha NO deben usarse porque:
Ellos no tienen
this
Utiliza el "alcance léxico" para determinar cuál
this
debería ser el valor de " ". En palabras simples, el alcance léxico 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 se puede lograr la misma funcionalidad utilizando parámetros de reposo.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 prototipo.
Cuándo usar la función de flecha y cuándo no:
map
,reduce
oforEach
.fuente
arguments
objeto especial que no está disponible en las funciones de flecha aquí: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…Para usar las funciones de flecha
function.prototype.call
, hice una función auxiliar en el prototipo de objeto:uso
Editar
No necesitas un ayudante. Podrías hacerlo:
fuente