Könnte mir bitte jemand eine kurze Einführung in die lexikalische Sprache geben?
"Ein Pfeilfunktionsausdruck (auch bekannt als Fettpfeilfunktion) hat eine kürzere Syntax als Funktionsausdrücke und bindet den Wert lexisch (bindet ihn nicht selbst, arguments, super oder new.target). Pfeilfunktionen sind immer anonym. "
Bedeutet das, dass, wenn ich ein Funktionsmitglied mit dem "this" -Ref von einer "Fat Arrow" -Funktion anrufe, bezieht sich "this" immer auf das umschließende "this"?
Sie scheinen das richtige Verständnis davon zu haben, was mit this in einer Pfeilfunktion passiert. Ich werde eine Erklärung anbieten, die meiner Meinung nach zur Unterhaltung beiträgt und hoffentlich Ihr Verständnis festigt.
Wie Sie wahrscheinlich wissen, überprüft es beim Definieren einer Funktion und der Verwendung einer Variablen darin, ob die Variable in ihrem Gültigkeitsbereich definiert wurde. Wenn es ist, benutzt es es! Wenn nicht, wird der umschließende Bereich für diese Variablendefinition überprüft. Er überprüft umschließende Bereiche, bis er die Variable findet oder den globalen Gültigkeitsbereich erreicht. Funktionsdefinitionen, die nicht Pfeilfunktionen sind, definieren implizit this für Sie. Daher werden sie niemals einen umschließenden Bereich prüfen, wenn Sie this in ihrem Bereich verwenden (weil sie ihn in ihrem eigenen Bereich finden!). Arrow-Funktionen definieren KEINE eigenen this , also gehen sie zum umschließenden Bereich und suchen ihn genauso, wie sie es mit jeder Variablen tun würden, die Sie in ihrem Bereich verwenden möchten.
Nehmen wir an, Sie haben einen Klick-Listener. In diesem Listener führen Sie einen AJAX-Vorgang wie setTimeout aus. Nach Ablauf der eingestellten Zeit wird der Code innerhalb des Callbacks ausgeführt. Innerhalb dieses Callbacks haben Sie möglicherweise this aufgerufen, um die Farbe der angeklickten Schaltfläche zu ändern. Das Steuerelement wird jedoch aufgrund der AJAX-Operation nicht mehr im Zusammenhang stehen. ES2015 führte die Pfeilfunktion ein, um dieses Problem zu beheben. Die Pfeilfunktion erfasst den this -Wert des umschließenden Kontexts.
Der Beispiel-Anwendungsfall ist:
%Vor%Um diesen Fall zu vermeiden:
%Vor% Um das Verhalten von this in Pfeilfunktionen zu beschreiben, ist der Begriff "lexikal this " irgendwo zwischen verwirrend und falsch.
Das Verhalten ist ganz einfach, dass this in einer Pfeilfunktion sich auf die this in der umgebenden Funktion bezieht - oder vielleicht wäre es einfacher und genauer zu sagen, dass die Pfeilfunktion nicht definiert (oder "bind") sein eigenes this .
Die unglückliche Terminologie von "lexical this " wurde möglicherweise durch eine schlechte Wortwahl im MDN-Artikel zu Pfeilfunktionen (der bis vor kurzem auch dazu ermutigt hat, den veralteten Begriff" Fettpfeilfunktion "zu verwenden). Dies wurde jetzt aufgeräumt. Beachten Sie auch, dass die Spezifikation niemals den Ausdruck "lexikalisch" in Bezug auf this in den Pfeilfunktionen verwendet. Ich wäre neugierig zu wissen, wer diesen Ausdruck gefunden hat.
Ich schrieb einen Artikel darüber , dessen Kern ist: nicht darüber nachdenken, was "lexikalisches" bedeutet. Machen Sie nicht sich Gedanken darüber, was "dies" in einer Pfeilfunktion bedeutet. Sie wissen bereits (oder zumindest, wenn Sie es nicht tun, ist es die Schuld Ihrer Verwirrung bezüglich eines äußeren Funktionsumfangs, nicht der Fehler der Pfeilfunktion).
Sie könnten über die Jahre hinweg konditioniert worden sein, um sich darüber Sorgen zu machen, was "dieses" bedeuten würde, wenn Sie es innerhalb einer verschachtelten oder höherrangigen Funktion verwenden müssten. Aber mit Pfeilfunktionen können Sie sich einfach nur Sorgen machen. Sie wissen mit ziemlicher Sicherheit bereits, worauf sich "dies" in dem Kontext bezieht, in dem Sie sich gerade befinden: Innerhalb der Pfeilfunktion hat sich nichts geändert. Stellen Sie sich Pfeilfunktionen als den einfachen Fall und function () {} als den komplexen vor.Schreibst du eine Funktion und startest einen if () {} -Block und sorgst dich darum, was "this" sich geändert haben könnte? Nein? Gleiches mit Pfeilfunktionen. Das ist "lexikalisch". Es bedeutet "Hakuna Matata."
Bedeutet das, dass, wenn ich ein Funktionsmitglied mit dem "this" -Ref von einer "Fat Arrow" -Funktion anrufe, bezieht sich "this" immer auf das umschließende "this"?
Die Antwort auf Ihre Suchanfrage lautet Ja . Wie Sie bereits festgestellt haben, haben fette Pfeilfunktionen keinen this Verweis, so dass sie die Referenz des umschließenden Kontexts verwenden, was wiederum die Möglichkeit bietet zu steuern, wie der Aufruf von this innerhalb einer Fettpfeilfunktion aussehen würde antworte.
Zum Beispiel:
Wenn Sie in einem Objekt, das this verwendet, eine Fettpfeilfunktion verwenden möchten, suchen Sie nach dem äußeren Kontext. In diesem Fall lautet der Kontext window :
Wenn Sie jedoch die ES6-Syntax verwenden, die öffentliche Klassenfeldsyntax ist:
%Vor% Es gibt viele andere Instanzen (wie die Verwendung in render function von React auf ein HTML-Element, um Klick-Listener zu setzen), die außerhalb des Bereichs dieser Frage liegen, wo Fettpfeilfunktionen verwendet werden und this entsprechend gebunden ist Der Kontext, in dem es verwendet wird, gibt uns so die Möglichkeit, sein Wesen zu kontrollieren. Hoffe es hilft!
Wenn Sie diese in es6 fette Pfeilfunktion verwenden, wird dieser lexikalisch in dem Sinne verwendet, dass das, worauf sich dieser Bereich bezieht, ihm zugewiesen wird, im Gegensatz zur normalen es5-Funktionsdeklaration, die nach dem Start sucht vom innersten Bereich zum globalen Bereich, bis es gefunden wird.
%Vor%In der Zwischenzeit gab es eine Möglichkeit, das lexikalische Scoping in JavaScript zu implementieren, indem man ein this-Schlüsselwort einer Variablen zuwies, was dieses lokal zum Geltungsbereich macht.
%Vor%Tags und Links javascript ecmascript-6