¿Son las "funciones de la flecha" y las "funciones" equivalentes intercambiables

javascript ecmascript-6 arrow-functions


Las funciones de las flechas en ES2015 proporcionan una sintaxis más concisa.

  • ¿Puedo reemplazar ahora todas mis expresiones de declaraciones de funciones por funciones de flechas?
  • ¿A qué tengo que prestar atención?

Examples:

Función de constructor

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 objetos (literales)

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

// vs

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

Callbacks

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

// vs

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

Funciones variadas

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

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




Answer 1 Felix Kling


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 usa this , arguments y no se llama con new , entonces sí.


Como tan a menudo: depende . Las funciones de flecha tienen un comportamiento diferente al de las declaraciones / expresiones de función, así que echemos un vistazo a las diferencias primero:

1. Léxico this y arguments

Las funciones de flecha no tienen su propio this o arguments 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 los arguments refieren a los valores de this y los 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, this refiere al objeto que se creó dentro del createObject . En el caso de la función de flecha, this refiere a this de createObject .

Esto hace que las funciones de flecha sean útiles si necesita acceder a this del 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 establecer una función de flecha con .bind o .call .

Si no está muy familiarizado con 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 invocar sin new (es decir, llamada a función normal).

Las funciones creadas a través de las expresiones de declaración de funciones son tanto construibles como llamables.
Las funciones de flecha (y métodos) solo son invocables. class constructores de clase son solo construibles.

Si intenta llamar una función no llamable o construir una función no construible,obtendrá un error de tiempo de ejecución.


Sabiendo esto,podemos afirmar lo siguiente.

Replaceable:

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

No reemplazable:

  • Funciones del constructor
  • Función / métodos agregados a un prototipo (porque generalmente usan this )
  • Funciones variables (si usan arguments (ver más abajo))

Veamos esto más de cerca 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 prototipo

Lo más probable es que no, porque los métodos prototipo usualmente usan this para acceder a la instancia. Si no usan this , puede reemplazarlo. Sin embargo, si le interesa principalmente la sintaxis concisa, use class con 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í a través de this , siga usando expresiones de función, o use la nueva sintaxis del método:

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

Callbacks

Depende. Definitivamente deberías reemplazarlo si estás aliasando el exterior this o 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 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 usa this (o arguments ), ¡ no puede usar una función de flecha!

Funciones variadas

Dado que las funciones de flecha no tienen sus propios arguments , no puede simplemente reemplazarlas con una función de flecha. Sin embargo, ES2015 introduce una alternativa al uso de arguments : el parámetro rest .

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

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

Pregunta relacionada:

Más recursos:




Answer 2 Ashutosh Sharma


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 donde 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 las flechas NO deben utilizarse porque:

  1. Ellos no tienen this

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

  2. No tienen argumentos

    Las funciones de flecha no tienen un objeto de argumentos. 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 las flechas no pueden ser constructoras porque no tienen una propiedad de prototipo.

Cuándo usar la función de flecha y cuándo no:

  1. No utilice para añadir 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 como map , reduce o forEach .
  3. Use declaraciones de funciones para las funciones que llamaría por su nombre (porque están izadas).
  4. Usar las funciones de flecha para las llamadas de retorno (porque tienden a ser más largas).