javascript - sintaxis - ¿Puedes unir las funciones de flecha?

map javascript

Question

He estado experimentando con ES6 durante un tiempo y acabo de encontrar un pequeño problema.

Realmente me gusta usar las funciones de flecha, y siempre que puedo, las uso.

Sin embargo, ¡parece que no puedes atarlos!

Aquí está la función:

var f = () => console.log(this);

Aquí está el objeto al que quiero vincular la función:

var o = {''a'': 42};

Y así es como me uniría a f :

var fBound = f.bind(o);

Y luego puedo llamar a fBound :

fBound();

Lo que generará esto (el objeto o ):

{''a'': 42}

¡Guay! ¡Encantador! Excepto que no funciona. En lugar de generar el objeto o , genera el objeto de window .

Entonces me gustaría saber: ¿puedes unir las funciones de flecha? (Y si es así, ¿cómo?)

He probado el código anterior en Google Chrome 48 y Firefox 43, y el resultado es el mismo.

Answer 1

Desde el MDN :

Una expresión de función de flecha tiene una sintaxis más corta en comparación con las expresiones de función y enlaza léxicamente el valor this (no enlaza sus propios this, argumentos, super o new.target). Las funciones de flecha son siempre anónimas.

Esto significa que no puede vincularle un valor como desee.

Answer 2

Durante años, los desarrolladores de js lucharon con el enlace de contexto, preguntaron por qué this cambió en javascript, tanta confusión a lo largo de los años debido al enlace de contexto y la diferencia entre el significado de this en javascript y this en la mayoría de los otros lenguajes OOP.

Todo esto me lleva a preguntar, ¡por qué, por qué! ¿Por qué no quieres volver a vincular una función de flecha? Aquellos donde fueron creados especialmente para resolver todos estos problemas y confusiones y evitar tener que usar bind o call o cualquier otra forma para preservar el alcance de la función.

TL; DR

No, no puede volver a vincular las funciones de flecha.

Answer 3

Hice la misma pregunta hace un par de días.

No puede enlazar un valor ya que this ya está enlazado.

Enlace diferente de este ámbito a ES6 => operador de función

Answer 4

No puede "volver a vincular" una función de flecha. Siempre se llamará con el contexto en el que se definió. Solo usa una función normal.

De la especificación ECMAScript 2015 :

Cualquier referencia a argumentos, super, this o new.target dentro de una función de flecha debe resolverse en un enlace en un entorno léxico. Normalmente, este será el entorno de función de una función de cierre inmediato.

Answer 5

Para completar, puede volver a vincular las funciones de flecha, simplemente no puede cambiar el significado de this .

bind todavía tiene valor para argumentos de función:

((a, b, c) => {
  console.info(a, b, c) // 1, 2, 3
}).bind(undefined, 1, 2, 3)()

Pruébelo aquí: http://jsbin.com/motihanopi/edit?js,console

Answer 6

Quizás este ejemplo te ayude:

let bob = {
   _name: "Bob",
   _friends: [""],
   printFriends:(x)=> {
      x._friends.forEach((f)=> {
         console.log(x._name + " knows " + f);
      });
   }
}

bob.printFriends = (bob.printFriends).bind(null,bob);
bob.printFriends();

Answer 7

var obj = {value: 10};
function arrowBind(fn, context) {
  let arrowFn;
  (function() {
    arrowFn = eval(fn.toString());
    arrowFn();
  }).call(context);
}
arrowBind(() => {console.log(this)}, obj);

Answer 8

¿Las funciones de flecha ES6 realmente resuelven "esto" en JavaScript

El enlace anterior explica que las funciones de flecha no cambian con las funciones de bind, call, apply .

Se explica con un muy buen ejemplo.

ejecuta esto en el node v4 para ver el comportamiento "esperado",

this.test = "attached to the module";
var foo = { test: "attached to an object" };
foo.method = function(name, cb){ 
    // bind the value of "this" on the method 
    // to try and force it to be what you want 
    this[name] = cb.bind(this); };
foo.method("bar", () => { console.log(this.test); });
foo.bar();