¿Las 'Funciones de flecha' y las 'Funciones' son equivalentes / intercambiables?

521

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) => {
  // ...
};
Felix Kling
fuente
55
Preguntas similares sobre las funciones de flecha han surgido cada vez más con ES2015 cada vez más popular. No sentí que hubiera una buena pregunta / respuesta canónica para este problema, así que creé esta. Si crees que ya hay una buena, házmelo saber y la cerraré como duplicada o la eliminaré. Siéntase libre de mejorar los ejemplos o agregar nuevos.
Felix Kling
2
¿Qué pasa con JavaScript ecma6 cambiar la función normal a la función de flecha ? Por supuesto, una pregunta normal nunca puede ser tan buena y genérica como una escrita específicamente para ser canónica.
Bergi
Mire este ejemplo de Plnkr La variable thises timesCalledincrementos 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.
abbaf33f

Respuestas:

750

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, argumentsy no se llama con new, 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 thisyarguments

Las funciones de flecha no tienen sus propias thiso argumentsvinculantes. 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, thisy se argumentsrefieren a los valores de thisy argumentsen el entorno, la función de flecha se define en (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 expresión de función, se thisrefiere al objeto que se creó dentro de createObject. En el caso la función de flecha, thisse refiere a thisde createObjectsí mismo.

Esto hace que las funciones de flecha sean útiles si necesita acceder al thisentorno 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 establecer una función de flecha thiscon .bindo .call.

Si no está muy familiarizado this, considere leer

2. 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 decir new User(). Si una función es invocable, se puede newinvocar 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. classLos 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:

  • Funciones que no usan thiso arguments.
  • Funciones que se usan con .bind(this)

No reemplazable:

  • Funciones de constructor
  • Función / métodos agregados a un prototipo (porque generalmente se usan this)
  • Funciones variables (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 invocar con new. Siga usando una declaración / expresión de función o uso class.

Métodos prototipo

Lo más probable es que no, porque los métodos prototipo generalmente se usan thispara acceder a la instancia. Si no lo usan this, puede reemplazarlo. Sin embargo, si le interesa principalmente la sintaxis concisa, use classcon su sintaxis de método conciso:

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

  getName() {
    return this.name;
  }
}

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:

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

Devoluciones de llamada

Depende. Definitivamente deberías reemplazarlo si estás aliasando el exterior thiso estás 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 thisen un valor específico, como suele ser el caso con 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 presenta una alternativa al uso arguments: el parámetro rest .

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

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

Pregunta relacionada:

Recursos adicionales:

Felix Kling
fuente
66
Posiblemente vale la pena mencionar que el léxico thistambién afecta supery que no tienen .prototype.
loganfsmyth
1
También sería bueno mencionar que no son intercambiables sintácticamente: una función de flecha ( 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).
JMM
@JMM: "hace tropezar a las personas con bastante frecuencia" ¿ puede proporcionar un ejemplo concreto? Rozando la especificación, parece que los lugares donde puedes poner un FE pero no un AF darían como resultado errores de tiempo de ejecución de todos modos ...
Felix Kling
Claro, me refiero a cosas como tratar de invocar inmediatamente una función de flecha como una expresión de función ( () => {}()) o hacer algo como x || () => {}. 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?
JMM
Aquí hay algunos enlaces que aparecen en la naturaleza: substack / node-browserify # 1499 , babel / babel-eslint # 245 (esta es una flecha asíncrona, pero creo que es el mismo problema básico), y un montón de problemas en Babel que son difíciles de encontrar ahora, pero aquí hay un T2847 .
JMM
11

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 thiscuando 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:

  1. Ellos no tienen this

    Utiliza el "alcance léxico" para determinar cuál thisdebería ser el valor de " ". En palabras simples, el alcance léxico utiliza " this" desde el interior del cuerpo de la función.

  2. Ellos no tienen arguments

    Las funciones de flecha no tienen un argumentsobjeto. 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 ``

  3. 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:

  1. No lo use para agregar la función como una propiedad en el objeto literal porque no podemos acceder a esto.
  2. Las expresiones de función son mejores para los métodos de objeto. Las funciones de flecha son mejores para devoluciones de llamada o métodos comomap , reduceo forEach.
  3. Use declaraciones de funciones para las funciones que llamaría por nombre (porque están izadas).
  4. Utilice las funciones de flecha para las devoluciones de llamada (porque tienden a ser menos estrictas)
Ashutosh
fuente
2
el 2. No tienen argumentos, lo siento, no es cierto, uno puede tener argumentos sin usar el ... operador, tal vez quieras decir que no tienes una matriz como argumento
Carmine Tambascia
@CarmineTambascia Lea sobre el argumentsobjeto especial que no está disponible en las funciones de flecha aquí: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
vichle
0

Para usar las funciones de flecha function.prototype.call, hice una función auxiliar en el prototipo 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

No necesitas un ayudante. Podrías hacerlo:

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