Puoi associare "questo" a una funzione freccia?

Sto sperimentando ES6 da un po 'di tempo e ho appena riscontrato un leggero problema.

Mi piace molto usare le funzioni freccia e ogni volta che posso, le uso.

Tuttavia, sembrerebbe che non puoi vincolarli!

Ecco la funzione:

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

Ecco l'oggetto a cui voglio associare la funzione:

var o = {'a': 42};

Ed ecco come mi legherei fa o:

var fBound = f.bind(o);

E poi posso semplicemente chiamare fBound:

fBound();

Che produrrà questo (l' ooggetto):

{'a': 42}

Freddo! Bello! Solo che non funziona. Invece di emettere l' ooggetto, genera l' windowoggetto.

Quindi vorrei sapere: puoi associare le funzioni freccia? (E se sì, come?)

Ho testato il codice sopra in Google Chrome 48 e Firefox 43 e il risultato è lo stesso.

Non è possibile ricollegare this in una funzione freccia. Sarà sempre definito come il contesto in cui è stato definito. Se devi thisessere significativo, dovresti usare una normale funzione.

Dalle specifiche ECMAScript 2015 :

Qualsiasi riferimento ad argomenti, super, this o new.target all'interno di una ArrowFunction deve risolversi in un'associazione in un ambiente lessicale. In genere questo sarà l'ambiente funzionale di una funzione che si chiude immediatamente.

Per essere completo, è possibile ricollegare le funzioni delle frecce, semplicemente non è possibile modificare il significato di this.

bind ha ancora valore per gli argomenti della funzione:

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

Provalo qui: http://jsbin.com/motihanopi/edit?js,console

Dal MDN :

Un'espressione di funzione freccia ha una sintassi più breve rispetto alle espressioni di funzione e associa in modo lessicale questo valore (non associa a sé questo, argomenti, super o new.target). Le funzioni freccia sono sempre anonime.

Ciò significa che non puoi associare un valore a thisquello che desideri.

Per anni, gli sviluppatori di js hanno lottato con l'associazione del contesto, chiedendosi perché è thiscambiato in javascript, tanta confusione negli anni a causa dell'associazione del contesto e la differenza tra il significato di thisin javascript e thisnella maggior parte degli altri linguaggi OOP.

Tutto ciò mi porta a chiedere, perché, perché! perché non vorresti ricollegare una funzione freccia! Quelli in cui appositamente creato per risolvere tutti questi problemi e confusioni ed evitare di dover utilizzare bindo callo qualsiasi altro modo per preservare la portata della funzione.

TL; DR

No, non è possibile ricollegare le funzioni delle frecce.

Non è possibile utilizzare bindper modificare il valore thisall'interno di una funzione freccia. Tuttavia, è possibile creare una nuova funzione regolare che fa la stessa cosa della vecchia funzione freccia e quindi utilizzare callo bindper ricollegare thiscome di consueto.

Usiamo una evalchiamata qui per ricreare la funzione freccia che passi come una normale funzione e quindi usiamo callper invocarla con una diversa this:

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

Le funzioni della freccia ES6 risolvono davvero "questo" in JavaScript

Il link sopra spiega che le funzioni freccia thisnon cambiano con le bind, call, applyfunzioni.

Viene spiegato con un bell'esempio.

eseguilo node v4per vedere il comportamento "previsto",

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(); 

Ho fatto la stessa domanda un paio di giorni fa.

Non è possibile associare un valore poiché thisè già associato.

Binding diverso questo ambito a ES6 => operatore funzione

In breve, NON PUOI legare le funzioni della freccia, ma continua a leggere:

Immagina di avere questa funzione freccia sotto la quale stampa thissulla console:

const myFunc = ()=> console.log(this);

Quindi la soluzione rapida per questo sarebbe usare la normale funzione, quindi basta cambiarla in:

function myFunc() {console.log(this)};

Quindi puoi associarlo a qualsiasi ambiente lessicale usando bindo callo apply:

const bindedFunc = myFunc.bind(this);

e chiamalo in caso di bind.

bindedFunc();

Ci sono anche modi per usarlo eval()per farlo, che fortemente sconsigliato .

Forse questo esempio ti aiuta:

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

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