Also experimentiere ich mit ES6, habe das grigio: babel-Paket installiert und fange an, meinen es5-Code durchzugehen und ihn auf einige der neuen ES6-Syntax zu aktualisieren, als ich auf ein Problem stieß.
Ursprünglich sahen meine Vorlagenhelfer so aus:
%Vor%was in einer Blaze jeder Schleife als solche verwendet wird
%Vor% Wie zu erwarten, hatten alle meine Ereignishandler für die Elemente in dieser Ereignisschleife Zugriff auf die Felder in der Mongo Collection, die von exampleHelper über das Schlüsselwort this zurückgegeben werden. this.exampleField würde genau das zurückgeben, was ich erwarten würde.
Jetzt ist der Punkt, an dem ich mit der Aktualisierung auf ES6 begonnen habe. Aus irgendeinem Grund unterbricht die folgende Syntax den Datenkontext. Statt this gibt also zurück, was Sie erwarten würden, stattdessen wird Window zurückgegeben:
Das obige war mein erster Versuch, dann versuchte ich:
%Vor%Also habe ich den obigen ES6-Code über Babeljs 'Online-Übersetzer ausgeführt und folgendes erhalten, was offensichtlich falsch ist, da ich keine benannte Funktion haben möchte:
%Vor%Kann mir jemand sagen, wie die richtige Syntax aussehen soll?
Kann mir jemand sagen, wie die richtige Syntax aussehen soll?
Dein ursprünglicher Code war völlig in Ordnung. Sie müssen die Funktionen nicht missbrauchen und sie nur verwenden, um sie zu verwenden, einige Keystokes usw. zu speichern. In diesem Fall sollten Sie die normale anonyme Funktion verwenden.
Der Grund, warum Sie diese Verwirrung haben, weil this auf ein globales Objekt zeigt, liegt daran, dass Pfeilfunktionen funktionieren: Sie haben lexikalisch this , nicht dynamisch . Dies bedeutet, dass this reference zum Zeitpunkt der Erstellung der Funktion statisch an den Funktionskontext gebunden ist (in Ihrem Fall war es window ) und zur Laufzeit nicht dynamisch aufgelöst wird.
Dieser Code wird nicht funktionieren (es wird das Fensterobjekt angezeigt):
%Vor% Wenn Sie die => -Syntax verwenden, möchte sie Folgendes tun:
In diesem Fall entspricht this tatsächlich window . Die Lösung besteht darin, => in diesem Szenario nicht zu verwenden.
Tags und Links javascript meteor ecmascript-6