Pouvez-vous lier «ceci» dans une fonction de flèche?

J'expérimente avec ES6 depuis un moment maintenant, et je viens juste d'arriver à un léger problème.

J'aime vraiment utiliser les fonctions fléchées, et chaque fois que je peux, je les utilise.

Cependant, il semblerait que vous ne puissiez pas les lier!

Voici la fonction:

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

Voici l'objet auquel je souhaite associer la fonction:

var o = {'a': 42};

Et voici comment je me lierais fà o:

var fBound = f.bind(o);

Et puis je peux simplement appeler fBound:

fBound();

Ce qui affichera ceci (l' oobjet):

{'a': 42}

Cool! Charmant! Sauf que ça ne marche pas. Au lieu de sortir l' oobjet, il sort l' windowobjet.

Alors j'aimerais savoir: pouvez-vous lier des fonctions fléchées? (Et si oui, comment?)

J'ai testé le code ci-dessus dans Google Chrome 48 et Firefox 43, et le résultat est le même.

Vous ne pouvez pas relier this dans une fonction de flèche. Il sera toujours défini comme le contexte dans lequel il a été défini. Si vous avez besoin thisd'être significatif, vous devez utiliser une fonction normale.

D'après les spécifications ECMAScript 2015 :

Toute référence à des arguments, super, this ou new.target dans une ArrowFunction doit être résolue en une liaison dans un environnement englobant lexicalement. Il s'agit généralement de l'environnement de fonction d'une fonction immédiatement englobante.

Pour être complet, vous pouvez relier les fonctions fléchées, vous ne pouvez tout simplement pas changer la signification de this.

bind a toujours de la valeur pour les arguments de fonction:

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

Essayez-le ici: http://jsbin.com/motihanopi/edit?js,console

Du MDN :

Une expression de fonction de flèche a une syntaxe plus courte que les expressions de fonction et lie lexicalement la valeur this (ne lie pas son propre this, arguments, super ou new.target). Les fonctions fléchées sont toujours anonymes.

Cela signifie que vous ne pouvez pas lier une valeur à ce thisque vous voulez.

Pendant des années, les développeurs js ont eu du mal avec la liaison de contexte, ont demandé pourquoi thischangé en javascript, tant de confusion au fil des ans en raison de la liaison de contexte et de la différence entre la signification de thisen javascript et thisdans la plupart des autres langages POO.

Tout cela m'amène à me demander pourquoi, pourquoi! pourquoi ne voudriez-vous pas relier une fonction de flèche! Ceux où créé spécialement pour résoudre tous ces problèmes et confusions et éviter d' avoir à utiliser bindou callou tout autre moyen de préserver la portée de la fonction.

TL; DR

Non, vous ne pouvez pas relier les fonctions fléchées.

Vous ne pouvez pas utiliser bindpour modifier la valeur de l' thisintérieur d'une fonction de flèche. Cependant, vous pouvez créer une nouvelle fonction régulière qui fait la même chose que l'ancienne fonction de flèche, puis utiliser callou bindpour relier thiscomme d'habitude.

Nous utilisons un evalappel ici pour recréer la fonction de flèche que vous passez en tant que fonction normale, puis callpour l'invoquer avec un autre this:

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

Les fonctions fléchées ES6 résolvent vraiment «ceci» en JavaScript

Le lien ci-dessus explique que les fonctions fléchées thisne changent pas avec les bind, call, applyfonctions.

C'est expliqué avec un très bel exemple.

exécutez ceci node v4pour voir le comportement "attendu",

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

J'ai posé la même question il y a quelques jours.

Vous ne pouvez pas lier une valeur car le thisest déjà lié.

Liaison différente de cette portée à ES6 => opérateur de fonction

Bref, vous NE POUVEZ PAS lier les fonctions fléchées, mais lisez la suite:

Imaginez que vous avez cette fonction de flèche ci-dessous qui s'imprime thissur la console:

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

Donc, la solution rapide pour cela serait d'utiliser la fonction normale, alors changez-la simplement en:

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

Ensuite, vous pouvez le lier à n'importe quel environnement lexical en utilisant bindou callou apply:

const bindedFunc = myFunc.bind(this);

et appelez-le en cas de bind.

bindedFunc();

Il existe également des moyens d'utiliser eval()pour le faire, ce qui est fortement déconseillé .

Peut-être que cet exemple vous aidera:

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