Question Pouvez-vous lier des fonctions de flèche?


J'expérimente ES6 depuis un moment maintenant, et je viens juste de rencontrer un petit problème.

J'aime vraiment utiliser les fonctions de flèche 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 que je veux associer à la fonction:

var o = {'a': 42};

Et voici comment je lierais f à o:

var fBound = f.bind(o);

Et puis je peux juste appeler fBound:

fBound();

Qui produira cela (le o objet):

{'a': 42}

Cool! Charmant! Sauf que ça ne marche pas. Au lieu de sortir le o objet, il sort le window objet.

Donc, je voudrais savoir: pouvez-vous relier les fonctions de flèche? (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.


58
2017-10-23 17:22


origine


Réponses:


Vous ne pouvez pas "relier" une fonction de flèche. Il sera toujours appelé avec le contexte dans lequel il a été défini. Utilisez simplement une fonction normale.

Du ECMAScript 2015 Spec:

Toute référence aux arguments, super, this ou new.target dans une ArrowFunction doit se résumer à une liaison dans un environnement lexical. Ce sera généralement l'environnement de fonction d'une fonction immédiatement englobante.


66
2017-10-23 17:24



Du MDN:

Une expression de fonction de flèche a une syntaxe plus courte comparée aux expressions de fonction et lie le lexiquement à cette valeur (ne lie pas ceci ceci, arguments, super ou new.target). Les fonctions de flèche sont toujours anonymes.

Cela signifie que vous ne pouvez pas lui attribuer une valeur comme vous le souhaitez.


8
2017-10-23 17:25



Pendant des années, les développeurs de js ont eu du mal avec la liaison de contexte, ont demandé pourquoi this changé en javascript, tant de confusion au fil des ans en raison de la liaison de contexte et la différence entre le sens de this en javascript et this dans la plupart des autres langues de la POO.

Tout cela m'amène à demander pourquoi, pourquoi! pourquoi voudriez-vous renouer une fonction de flèche! Ceux qui ont été créés spécialement pour résoudre tous ces problèmes et confusions et éviter d’avoir à utiliser bind ou call ou 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.


5
2017-10-23 17:29



Pour être complet, vous pouvez relier les fonctions de flèche, vous ne pouvez pas changer la signification de this.

bind a toujours une valeur pour les arguments de la 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


5
2017-12-08 17:14



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

Vous ne pouvez pas lier une valeur depuis la this est déjà lié.

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


3
2017-10-23 17:26



Les fonctions de la flèche ES6 résolvent-elles vraiment "ceci" en JavaScript?

Le lien ci-dessus explique que la flèche fonctionne this ne change pas avec bind, call, apply les fonctions.

Cela s'explique par un très bel exemple.

exécuter ceci dans node v4 pour 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(); 

2
2017-07-02 14:07