javascript - ventajas - declare arrow function

¿Cuáles son las diferencias(si las hay) entre las funciones de flecha ES6 y las funciones enlazadas con Function.prototype.bind?

Question

Me parece que, en ES6, las dos funciones siguientes son casi idénticas:

function () {
  return this;
}.bind(this);

() => {
  return this;
};

El resultado final parece ser el mismo: las funciones de flecha producen un objeto de función de JavaScript con su contexto vinculado al mismo valor que el this donde se crean.

Obviamente, en el sentido general, Function.prototype.bind es más flexible que las funciones de flecha: puede vincularse a valores distintos de this , y puede enlazar cualquier función en cualquier momento, posiblemente mucho después de que se haya creado inicialmente. . Sin embargo, no estoy preguntando cómo el bind sí es diferente de las funciones de flecha, estoy preguntando cómo difieren las funciones de flecha de llamar inmediatamente a bind con this .

¿Hay alguna diferencia entre los dos constructos en ES6?

Answer 1

No hay diferencias (significativas).

Bueno, está bien, eso es un poco prematuro. Hay tres pequeñas diferencias únicas para las funciones de flecha.

1. Las funciones de flecha no se pueden usar con las new .

   Esto significa, por supuesto, que no tienen una propiedad prototype y no pueden usarse para crear un objeto con la sintaxis de inspiración clásica.

   new (() => {}) // TypeError: () => {} is not a constructor

   Sin embargo, esto es probablemente lo mejor: la forma en que los new trabajos no tendrían mucho sentido con las funciones vinculadas.

2. Las funciones de flecha no tienen acceso al objeto de arguments especiales al que tienen acceso las funciones de JavaScript normales.

   (() => arguments)(1, 2, 3) // ReferenceError: arguments is not defined

   Este es probablemente un poco más complicado. Presumiblemente esto es para eliminar una de las otras rarezas de JavaScript. El objeto de arguments es su propia bestia especial , y tiene un comportamiento extraño, por lo que no es sorprendente que haya sido lanzado.

   En cambio, ES6 tiene símbolos que pueden lograr lo mismo sin ninguna variable oculta mágica:

   ((...args) => args)(1, 2, 3) // [1, 2, 3]

3. Las funciones de flecha no tienen su propia propiedad new.target , usan el new.target de su función de inclusión, si existe.

   Esto es coherente con los otros cambios para eliminar los valores introducidos "mágicamente" para las funciones de flecha. Este cambio en particular es especialmente obvio, teniendo en cuenta que las funciones de flecha no se pueden usar con new todos modos, como se mencionó anteriormente.

De lo contrario, las flechas son como funciones ligadas, semánticamente. Es posible que las flechas sean más efectivas, ya que no tienen que llevar todo el equipaje extra y no necesitan convertirse primero de las funciones normales, pero son exactamente las mismas en el comportamiento.

Answer 2

Aquí hay una diferencia más sutil:

Las funciones de flecha pueden devolver un valor sin utilizar la palabra clave ''return'', omitiendo {} llaves siguientes a => inmediatamente.

var f=x=>x;           console.log(f(3));  // 3
var g=x=>{x};         console.log(g(3));  // undefined
var h=function(x){x}; console.log(h(3));  // undefined
var i=x=>{a:1};       console.log(i(3));  // undefined
var j=x=>({a:1});     console.log(j(3));  // {a:1}

Answer 3

Hay algunas diferencias:

• Las funciones de flecha no se pueden construir. Aunque tanto las funciones de flecha como las funciones de enlace no tienen una propiedad .prototype , las primeras arrojan una excepción cuando se las llama con new mientras que las últimas ignoran el valor enlazado y llaman a su función de destino como un constructor (con los argumentos parcialmente aplicados) , sin embargo) en la nueva instancia.

  function F() {}
  var f = () => {},
      boundF = F.bind({});
  console.log(new boundF(), new boundF instanceof F) // {}, true
  console.log(new f) // TypeError

• Las funciones de flecha tienen arguments léxicos, new.target y super también (no solo léxico). Una invocación a una función de flecha no inicializa ninguna de ellas, solo se heredan de la función en la que se definió la función de flecha. En una función vinculada, solo hacen referencia a los valores respectivos de la función de destino.

• Las funciones de flecha no vinculan realmente this valor. Por el contrario, no tienen uno, y cuando lo usa, se lo busca como un nombre de variable en el alcance léxico. Esto le permite definir de forma perezosa una función de flecha cuando todavía no está disponible:

  class X extends Object {
      constructor() {
           var f = () => this, // works
               boundF = function(){ return this; }.bind(this);
  //                                                    ^^^^ ReferenceError
           super(); // initialises `this`
           console.log(f(), f() == this); // {}, true
      }
  }
  new X;

• Las funciones de flecha no pueden ser funciones de generador (aunque pueden devolver generadores). Puede usar .bind() en una función de generador, pero no hay forma de expresar esto usando una función de flecha.