Können Sie 'dies' in einer Pfeilfunktion binden?

Ich habe jetzt eine Weile mit ES6 experimentiert und bin gerade auf ein kleines Problem gestoßen.

Ich benutze sehr gerne Pfeilfunktionen und wann immer ich kann, benutze ich sie.

Es scheint jedoch, dass Sie sie nicht binden können!

Hier ist die Funktion:

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

Hier ist das Objekt, an das ich die Funktion binden möchte:

var o = {'a': 42};

Und hier ist , wie ich binden fan o:

var fBound = f.bind(o);

Und dann kann ich einfach anrufen fBound:

fBound();

Welches wird dies (das oObjekt) ausgeben :

{'a': 42}

Cool! Schön! Nur dass es nicht funktioniert. Anstatt das oObjekt auszugeben, wird das Objekt ausgegeben window.

Ich würde gerne wissen: Können Sie Pfeilfunktionen binden? (Und wenn ja, wie?)

Ich habe den obigen Code in Google Chrome 48 und Firefox 43 getestet und das Ergebnis ist das gleiche.

Sie können eine Pfeilfunktion nicht erneut bindenthis . Es wird immer als der Kontext definiert, in dem es definiert wurde. Wenn Sie thisaussagekräftig sein möchten, sollten Sie eine normale Funktion verwenden.

Aus der ECMAScript 2015-Spezifikation :

Jeder Verweis auf Argumente, super, this oder new.target innerhalb einer ArrowFunction muss in eine Bindung in einer lexikalisch einschließenden Umgebung aufgelöst werden. In der Regel ist dies die Funktionsumgebung einer unmittelbar einschließenden Funktion.

Um vollständig zu sein, können Sie die Pfeilfunktionen neu binden und die Bedeutung von einfach nicht ändern this.

bind hat noch Wert für Funktionsargumente:

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

Probieren Sie es hier aus: http://jsbin.com/motihanopi/edit?js,console

Aus dem MDN :

Ein Pfeilfunktionsausdruck hat eine kürzere Syntax als Funktionsausdrücke und bindet diesen Wert lexikalisch (bindet nicht seinen eigenen Wert this, arguments, super oder new.target). Pfeilfunktionen sind immer anonym.

Dies bedeutet, dass Sie einen Wert nicht an einen thisgewünschten Wert binden können .

Jahrelang hatten js-Entwickler Probleme mit der Kontextbindung und fragten, warum thissich Javascript geändert habe, was im Laufe der Jahre aufgrund der Kontextbindung und des Unterschieds zwischen der Bedeutung von thisJavascript und den thismeisten anderen OOP-Sprachen zu großer Verwirrung geführt habe .

All dies führt mich zu der Frage, warum, warum! Warum sollten Sie eine Pfeilfunktion nicht erneut binden? Diese wurden speziell entwickelt, um all diese Probleme und Verwirrungen zu lösen und zu vermeiden, dass der Funktionsumfang verwendet werden muss bindoder auf callandere Weise.

TL; DR

Nein, Sie können Pfeilfunktionen nicht neu binden.

Sie können bindden Wert thisinnerhalb einer Pfeilfunktion nicht ändern . Sie können jedoch eine neue reguläre Funktion erstellen, die das Gleiche wie die alte Pfeilfunktion tut, und dann wie gewohnt verwenden calloder bindneu binden this.

Wir verwenden hier einen evalAufruf, um die Pfeilfunktion, die Sie als normale Funktion übergeben, neu zu erstellen und sie dann callmit einer anderen Funktion aufzurufen this:

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

Lösen Sie ES6-Pfeilfunktionen wirklich "dies" in JavaScript

Der obige Link erklärt, dass sich die Pfeilfunktionen thisnicht mit den bind, call, applyFunktionen ändern .

Es wird mit einem sehr schönen Beispiel erklärt.

Führen Sie dies aus node v4, um das "erwartete" Verhalten zu sehen.

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

Ich habe die gleiche Frage vor ein paar Tagen gestellt.

Sie können keinen Wert binden, da der thisbereits gebunden ist.

Unterschiedliche Bindung dieses Bereichs an den Funktionsoperator ES6 =>

Kurz gesagt, Sie können keine Pfeilfunktionen binden, aber lesen Sie weiter:

Stellen Sie sich vor, Sie haben diese Pfeilfunktion, unter der thisauf der Konsole gedruckt wird:

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

Die schnelle Lösung hierfür wäre die Verwendung der normalen Funktion. Ändern Sie sie einfach in:

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

Dann können Sie es mit bindoder calloder an jede lexikalische Umgebung binden apply:

const bindedFunc = myFunc.bind(this);

und nenne es im Falle von bind.

bindedFunc();

Es gibt auch Möglichkeiten, dies eval()zu tun, was dringend nicht empfohlen wird .

Vielleicht hilft Ihnen dieses Beispiel:

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