Die Arrow- und this-Funktionen in JavaScript beherrschen

Meistern Sie gründlich Pfeilfunktionen und das Verhalten von `this` in JavaScript Dies markiert einen Wendepunkt in Ihren Entwicklerfähigkeiten. Diese beiden Themen mögen anfangs verwirrend erscheinen, aber sobald Sie sie verstanden haben, werden Sie Fehler bemerken, die Ihnen zuvor entgangen sind, Sie schreiben klareren Code und haben weniger Schwierigkeiten mit dem Kontext.

In diesem Artikel werden wir uns ruhig und direkt damit befassen, Wie werden Pfeilfunktionen geschrieben, was sind die Unterschiede zwischen ihnen und regulären Funktionen, und wie wirkt sich das alles auf `this` aus?Darüber hinaus werden wir Schlüsselkonzepte wie call, apply, bind, die Verwendung von new, die verschiedenen Arten dieser Bindung, ihr Verhalten in Klassen, Ereignissen, Rückruffunktionen, Umgebungen wie React oder Node.js sowie die Fälle, in denen die Verwendung oder Vermeidung von Pfeilfunktionen sinnvoll ist, integrieren.

Grundlegende Syntax von Pfeilfunktionen

Eine Pfeilfunktion wird mit dem Symbol geschrieben. => und es ist immer ein FunktionsausdruckDas heißt, sie wird nicht mit Funktionsname() deklariert, sondern einer Variablen oder Eigenschaft zugewiesen.

Das allgemeine Format sieht in etwa so aus: const myFunction = (param1, param2) => { /* Code */ }Genau wie bei einer klassischen anonymen Funktion, nur dass das Wort function durch den Pfeil => ersetzt wird und die runden Klammern für die Parameter und die geschweiften Klammern für den Funktionskörper beibehalten werden.

Es ist wichtig, das zu verstehen Pfeilfunktionen sind keine Funktionsdeklarationen.Sie können nicht verwendet werden, bevor sie definiert sind, da sie nicht gehoisted werden (es findet kein Hoisting wie bei `function name()` statt). Sie verhalten sich immer wie Ausdrücke, die erst beim Durchlaufen dieser Zeile durch den Interpreter ausgewertet werden.

Syntax-Abkürzungen: kürzere Versionen von Pfeilfunktionen

Wenn der Code innerhalb der Funktion sehr einfach ist, erlauben Pfeilfunktionen eine kompaktere und lesbarere SyntaxWenn der Anweisungskörper nur eine Anweisung enthält und diese Anweisung eine Rückgabeanweisung ist, können mehrere Dinge weggelassen werden:

• Das Wort kann entfernt werden Funktion (Wir haben es tatsächlich bereits entfernt).
• Sie können entfernt werden Keys {}.
• Das Wort kann weggelassen werden. Rückkehr, unter Verwendung impliziter Rückgabewerte.

Zum Beispiel, anstatt eine Summe wie folgt zu schreiben const add = function(a, b) { return a + b; }Mit dem Pfeil können Sie es drin lassen const add = (a, b) => a + b;Das Ergebnis ist dasselbe, aber der Code ist kürzer und leichter lesbar, insbesondere bei Rückruffunktionen und Array-Methoden.

Parameter in Pfeilfunktionen

Die Regeln für Parameter ändern sich mit der Syntax leicht, und es ist wichtig, sie zu verstehen, da gerade am Anfang häufig Flüchtigkeitsfehler vorkommen:

• Ein einzelner ParameterSie können die Klammern entfernen und etwa Folgendes schreiben: name => `Hallo ${name}`Das ist absolut richtig und sehr verbreitet.
• NullparameterDie Klammern sind hier obligatorisch, da vor dem Pfeil etwas stehen muss: () => console.log('Keine Parameter').
• Zwei oder mehr ParameterSie benötigen außerdem Klammern, zum Beispiel (a, b, c) => a * b * c.

In allen Fällen, in denen sich der Funktionskörper auf einen einfachen Ausdruck reduzieren lässt, können Sie Nutzen Sie die implizite Rückgabefunktion und vermeiden Sie geschweifte Klammern und return-Anweisungen.Dies ist sehr praktisch bei Methoden wie Map, Filter, Reduce oder bei kleinen Transformationsfunktionen.

Implizite Rückgabe und Objekt-Rückgabe

Wenn die Pfeilfunktion nur einen Ausdruck hat, Der Wert dieses Ausdrucks wird automatisch zurückgegeben. Wenn Sie keine geschweiften Klammern verwenden. Wenn Sie jedoch ein Literalobjekt zurückgeben möchten, gibt es einen wichtigen Trick: Sie müssen das Objekt in Klammern setzen.

Wenn Sie so etwas schreiben wie const createUser = (name, age) => { name: name, age: age }JavaScript interpretiert geschweifte Klammern als Funktionskörper und nicht als Rückgabewert, daher wird nichts zurückgegeben (undefined). Damit es funktioniert, müssen Sie Folgendes schreiben: const createUser = (name, age) => ({ name, age }).

Kurz gesagt, jedes Mal, wenn Ihre Pfeilfunktion benötigt wird Gibt ein Objekt in einer einzigen Zeile zurückSetzen Sie das Objekt in Klammern, damit die Engine erkennt, dass es sich um den Rückgabewert und nicht um einen Codeblock handelt.

Wesentliche Unterschiede zwischen Normalfunktionen und Pfeilfunktionen

Abgesehen von der Syntax ist für den Alltag Folgendes wirklich wichtig: Pfeilfunktionen verhalten sich in mehreren kritischen Aspekten nicht wie „normale“ Funktionen.: this, Argumente, Verwendung als Methoden, Konstruktoren usw.

Dies wird in normalen Funktionen behandelt.

Bei einer klassischen Funktion ist der Wert von Dies hängt davon ab, wie die Funktion aufgerufen wird.nicht von dort, wo es definiert ist. Diese Nuance ist die Quelle eines Großteils der Verwirrung.

• Wenn Sie eine Funktion wie obj.method()Innerhalb dieser Methode verweist dies auf obj (implizite Bindung).
• Wenn Sie eine einzelne Funktion aufrufen, myFunction()Ohne ein vorangestelltes Objekt ist dies im nicht-strikten Modus das globale Objekt (im Browser das Fenster), im strikten Modus ist es undefiniert.
• Und usa new MyFunction()Innerhalb von MyFunction wird dann dieses neue Objekt erstellt (Bindung mit new).
• Wenn Sie verwenden anrufen, bewerben oder bindenSie können explizit angeben, welches Objekt dies sein soll.

Dieser dynamische Charakter macht es sehr wirkungsvoll, aber auch Es ist sehr einfach, in Callbacks und asynchronen Code einzubrechen. wenn Ihnen nicht klar ist, von wo aus die einzelnen Funktionen aufgerufen werden.

Lexikalische Behandlung von „this“ in Pfeilfunktionen

Pfeilfunktionen verändern die Regeln komplett: Sie haben kein eigenes.Anstatt ein neues „this“ basierend auf ihrem Namen zu erhalten, erfassen sie das „this“ der Umgebung, in der sie erstellt wurden; dies wird als lexikalisches „this“ bezeichnet.

Das bedeutet, dass innerhalb einer Pfeilfunktion Dies ist genau dasselbe „dies“, das sich an der Stelle befand, an der die Funktion definiert wurde.Es ist unabhängig davon, wie es aufgerufen wird oder ob `call`, `apply` oder `bind` verwendet werden. Diese Funktion ist Gold wert für die Arbeit mit Array-Methoden, `setTimeout`, `setInterval`, Promises und in allen Situationen, in denen man zuvor mit `self = this` oder `bind` jonglieren musste.

Die vier Hauptregeln von `this` in JavaScript

Um vollständig zu verstehen, warum Pfeilfunktionen so nützlich sind, ist es unerlässlich zu verstehen, wie JavaScript den Wert von ... bestimmt. Dies im normalen BetriebEs gibt vier Grundregeln, die in dieser Reihenfolge angewendet werden:

1. Explizite Bindung: Wenn Sie call, apply oder bind verwenden, um dies zu beheben.
2. Implizite Bindung: wenn Sie eine Methode als Eigenschaft eines Objekts aufrufen (obj.method()).
3. Bindung mit neuem: Wenn Sie eine Funktion mit new aufrufen, wird sie in einen Konstruktor umgewandelt.
4. Standardbindung: wenn keine der oben genannten Bedingungen zutrifft (global oder undefiniert, abhängig vom Modus).

Pfeilfunktionen umgehen dieses System: Sie halten sich nicht an diese Regeln, weil sie niemals ihre eigenen aufstellen.Sie erben einfach den Code, der sich in der umgebenden Umgebung befindet.

Explizite Bindung: Aufruf, Anwendung und Bindung

Normale Funktionen ermöglichen es Ihnen, den Wert mithilfe von drei bekannten Methoden zu erzwingen: anrufen, bewerben und bindenSie sind von grundlegender Bedeutung, um das klassische Modell vollständig zu verstehen und es mit dem Verhalten von Pfeilfunktionen zu vergleichen.

Aufruf und Anwendung: Ausführen mit benutzerdefiniertem `this`

Sowohl Anruf als auch Anwendung dienen dazu Eine Funktion mit einem konkreten `this` sofort aufrufenDer Unterschied liegt in der Art und Weise, wie die Argumente übergeben werden: call empfängt sie einzeln, apply empfängt ein Array.

Wenn Sie beispielsweise eine Funktion haben, die mit `this.name` begrüßt, können Sie diese Funktion mit verschiedenen Objekten aufrufen und die Logik wiederverwenden. Dies ist sehr üblich, wenn Sie Funktionen zwischen Objekten gemeinsam nutzen, ohne Code zu duplizieren.

bind: Erstelle eine neue Funktion mit `this`

Die Bindungsfunktion funktioniert anders: Anstatt sie im Moment auszuführen, Es wird eine neue Funktion zurückgegeben, in der dies an das übergebene Objekt "angehängt" ist.Darüber hinaus können Sie Argumente im Voraus festlegen (partielle Anwendung), sodass die resultierende Funktion bereits einige vordefinierte Parameter enthält.

Es ist sehr nützlich, wenn man möchte Methoden als Callbacks übergeben, ohne ihren ursprünglichen Kontext zu verlierenZum Beispiel in Event-Listenern oder in setInterval, wo dies normalerweise zu Fehlern führt.

Ein wichtiges Detail ist das Eine Funktion, die bereits mit `bind` gebunden ist, ignoriert nachfolgende Versuche, `this` mit `call` oder `apply` zu ändern.Die Bindung ist für diese abgeleitete Funktion permanent.

Implizite Bindung und Kontextverlust

Implizite Bindung tritt auf, wenn Man ruft eine Funktion als Methode eines Objekts auf.Das heißt, links vom Punkt befindet sich etwas. In diesem Fall wird `this` zu diesem Objekt.

Wenn Sie beispielsweise ein Restaurantobjekt mit den Methoden welcomeGuest und cookPizza haben, dann restaurant.welcomeGuest()Innerhalb der `this`-Methode wird auf das Restaurant selbst verwiesen, sodass Sie auf Eigenschaften wie Name oder Standort zugreifen können.

Das Problem beginnt, wenn Trennen Sie die Methode vom ObjektBeispielsweise durch Übergabe als Callback: `setInterval(this.tick, 1000)`. Wenn der Timer ausgeführt wird, existiert links vom Tick kein Objekt mehr. Die implizite Bindung geht verloren, die Standardbindung greift, wodurch `this` global oder undefiniert wird und Ihr Code fehlschlägt.

Die klassische Lösung bestand darin, bind(this) oder eine Referenz speichern, etwa so: `const self = this`. Heutzutage Pfeilfunktionen eignen sich hervorragend, um diesen Kontextverlust zu beheben.weil sie das äußere `this` erben und es nicht verändern, selbst wenn man sie als Rückruffunktionen übergibt.

Konstruktoren, neu und dies

Wenn Sie eine Funktion aufrufen mit neuJavaScript führt automatisch mehrere Schritte aus, um es als Konstruktor zu behandeln:

• Erstelle ein neues leeres Objekt.
• Link Dies ist ein neues Objekt innerhalb der Funktion.
• Passe den Prototyp des neuen Objekts an den Prototyp des Konstruktors an.
• Das Objekt wird zurückgegeben, es sei denn, Sie geben explizit ein anderes Objekt zurück.

Dank dessen kann ein Bauunternehmer wie function Person(name) { this.name = name; } Es ermöglicht Ihnen, `const p = new Persona('Ana');` zu schreiben und ein Objekt mit einer `name`-Eigenschaft zu erhalten. Innerhalb des Konstruktors bezieht sich `this` auf diese neu erstellte Instanz.

Dieses Muster wird auch zur Gestaltung komplexerer Strukturen verwendet, beispielsweise eines Bankkontos mit Ein- und Auszahlungsmethoden oder eines Fahrzeugs mit Antriebsarten und Eigenschaften wie Baujahr und Modell. In all diesen Fällen gilt: Dies ist die konkrete Instanz, mit der Sie arbeiten..

Sehr wichtig: Pfeilfunktionen können nicht als Konstruktoren verwendet werden.Sie unterstützen die Verwendung von `new` nicht, und wenn Sie es versuchen, erhalten Sie eine Fehlermeldung. Da sie weder ein eigenes `this` noch ein `prototype` besitzen, passen sie nicht in dieses Modell.

Standardbindung und strikter Modus

Wenn weder explizite noch implizite Bindung noch new angewendet werden, greift JavaScript auf Folgendes zurück: Standardbindung:

• Im nicht-strikten Modus Dies verweist auf das globale Objekt. (Fenster im Browser, global in Node.js).
• Im strikten Modus ('use strict'), Dies ist undefiniert. bei einer normalen Funktion, die als "Bareback" bezeichnet wird.

Diese strikte Veränderung ist sehr gesund, denn verhindert, dass Sie versehentlich das globale Objekt ändern Wenn man glaubt, in einem anderen Kontext zu arbeiten. Viele typische Fehler mit `this` treten zutage, wenn man 'use strict' aktiviert, genau weil sie dann nicht mehr nur halb funktionieren und schnell fehlschlagen.

Ein weiteres relevantes Detail ist, dass im globalen Umfeld des Browsers Mit var deklarierte Variablen werden zu Eigenschaften des globalen Objekts.Wenn Sie also `var nombreGlobal = 'Usuario'` deklarieren, können Sie auf `window.nombreGlobal` zugreifen. Dies führt in nicht strikten Funktionen zu Konflikten mit `this` und damit zu unerwartetem (und manchmal gefährlichem) Verhalten.

Arrow fungiert hierbei als „Game Changer“.

Der große Vorteil von Pfeilfunktionen besteht darin, dass Sie erzeugen kein neuesStattdessen erfassen sie das `this`-Attribut des Gültigkeitsbereichs, in dem sie erstellt werden. Einfach ausgedrückt: `this` innerhalb einer Pfeilfunktion ist dasselbe wie `this` außerhalb..

Dies löst viele klassische Probleme, bei denen der Kontext verloren ging, beispielsweise in forEach-Callbacks, setTimeout, Listenern und Promises. Es ist nicht mehr nötig, jeden internen Callback zu binden oder Zwischenvariablen wie self oder that mitzuführen, um den Kontext zu erhalten.

Ein typisches Beispiel ist das Durchlaufen eines Arrays von Mitgliedern innerhalb eines Teamobjekts. Verwendet man innerhalb von `forEach` eine normale Funktion, schlägt `this` fehl und verweist nicht mehr auf das Teamobjekt. Verwendet man stattdessen eine Pfeilfunktion, Dies bleibt die externe Methode.So können Sie this.name ohne Überraschungen lesen.

Globaler Kontext, Objektmethoden und Pfeilfunktionen

Pfeilfunktionen verhalten sich je nach … unterschiedlich. der Kontext, in dem sie definiert werden:

• Wenn sie im globalen Gültigkeitsbereich definiert sind, erben sie das this-globale Objekt (Fenster- oder Modulobjekt, abhängig von der Umgebung).
• Wenn sie definiert sind innerhalb einer normalen MethodeSie erben das `this` dieser Methode, das normalerweise das Objekt ist, das sie aufgerufen hat.
• Wenn Sie einen Pfeil direkt als Methode eines Objekts angeben (myObj.method = () => {}), So erhält man das Objekt nicht.aber das externe this (global oder das des Moduls).

Dieser letzte Punkt ist entscheidend: Es ist keine gute Idee, Pfeilfunktionen als Objektmethoden zu verwenden, wenn man auf `this` angewiesen ist, um auf die Eigenschaften des Objekts zuzugreifen.In solchen Fällen ist es vorzuziehen, die klassische Funktionssyntax in der Methode zu verwenden, sodass `this` das Objekt ist.

Stattdessen ist es eine gute Praxis, zu verwenden Pfeilfunktionen, die in normalen Methoden verschachtelt sind Wenn Sie Rückruffunktionen benötigen, die das `this` dieser Methode berücksichtigen (zum Beispiel in `forEach`, `map`, `setTimeout`...).

ES6-Klassen, this- und Arrow-Funktionen

ES6-Klassen sind nichts anderes als syntaktischer Zucker im System der Prototypen und KonstruktorenSie tragen aber zu einer besseren Strukturierung des Codes bei. Innerhalb einer Klasse verhält sich der Konstruktor wie ein herkömmlicher Funktionskonstruktor: `this` verweist auf die neu erstellte Instanz.

Die als definierten Methoden myMethod() { … } Sie verwenden auch `this` als Instanz, wenn sie vom Objekt aufgerufen werden. Wenn Sie die Methode jedoch extrahieren und in einer Variablen ohne Bindung speichern, geht der Kontext wieder verloren, genau wie bei jeder anderen normalen Funktion.

Eine sehr beliebte Strategie besteht darin, einige Methoden der Klasse wie folgt zu definieren: Eigenschaften mit PfeilfunktionZum Beispiel: getInfoArrow = () => { … }. Diese Methoden sind von dem Zeitpunkt ihrer Erstellung an an die Instanz "gebunden", sodass sie auch dann erhalten bleiben, wenn Sie sie als Rückruffunktionen übergeben oder aus dem Kontext herauslösen. Dies wird weiterhin korrekt auf das Objekt verweisen.Dies wird häufig in Frameworks wie React (mit Klassenkomponenten) verwendet, um zu vermeiden, dass im Konstruktor für jeden Ereignishandler eine Bindung vorgenommen werden muss.

DOM-Ereignisse, Rückruffunktionen und typische Probleme mit `this`

Im Browser fügt man mit addEventListener einen Event-Listener hinzu und übergibt eine normale Funktion, `this` innerhalb des Handlers verweist auf das DOM-Element, das das Ereignis ausgelöst hat.Das ist manchmal nützlich, aber manchmal zerstört es den Kontext Ihrer Klasse oder Ihres Objekts.

Wenn Sie beispielsweise in einer Button-Klasse `this.element.addEventListener('click', this.handleClick)` verwenden, ist `this` innerhalb von `handleClick` beim Auslösen des Ereignisses das DOM-Element und nicht die Klasseninstanz. Um dies zu beheben, gibt es drei gängige Möglichkeiten:

• Verwenden bind(this) bei der Registrierung des Zuhörers.
• Übergeben Sie eine Pfeilfunktion, die this.handleClick() aufruft und somit das this von der Instanz erbt.
• Definiere handleClick als Eigenschaft mit Pfeilfunktion in der Klasse.

Ähnliches geschieht bei Array-Callbacks (map, filter, forEach…): Wenn man eine Methode ohne Bindung übergibt, kann der Kontext verloren gehen. Arrow-Funktionen sind sehr praktisch, um interne Rückruffunktionen zu schreiben, die das entsprechende `this` sehen. ohne dass eine manuelle Verknüpfung erforderlich ist.

Asynchrone Operationen, Promises und async/await

Mit async/await ist der Wert von diesem wird ganz natürlich erhalten innerhalb der asynchronen Methode, solange Sie normale Funktionen in der Klassenmethode verwenden.

Wenn man jedoch Promises mit `then` und `catch` verkettet und innerhalb dieser Methoden reguläre Funktionen verwendet, riskiert man, das `this`-Attribut der Instanz zu verlieren. Deshalb ist es so üblich, Folgendes zu schreiben: .then(data => this.process(data)) y .catch(error => this.manageError(error))Die Pfeilfunktionen stellen sicher, dass `this` weiterhin auf das ursprüngliche Objekt verweist.

Letztlich In modernem asynchronem Code sind Pfeilfunktionen das Standardwerkzeug zur Aufrechterhaltung des Kontextes. ohne überall Kettenbindungen machen zu müssen.

Wann ist die Verwendung von Pfeilfunktionen angebracht?

Pfeilfunktionen spielen ihre Stärken besonders in diesen Fällen aus:

• Kurze Rückrufe in Array-Methoden, Promises, Timern usw.
• Kleine und einfache Funktionen wo Sie der Kürze Vorrang vor der Möglichkeit der Wiederverwendung einräumen.
• Situationen, in denen Soll dies diejenige bleiben, die von der äußeren Umgebung beeinflusst wird?beispielsweise innerhalb einer Klassen- oder Objektmethode.
• Klassenkomponenten in React und ähnlichen Bibliotheken, für um zu vermeiden, dass im Konstruktor gebunden werden muss für jeden Handler.

Ferner Programmierung Funktionaler (Funktionskomposition, Korrektur, Datentransformationen) machen Pfeilfunktionen den Code wesentlich lesbarer und ausdrucksstärker, weil Sie bevorzugen einfache und kurze Funktionen, ohne dass diese benannt werden müssen..

Wann Sie Pfeilfunktionen NICHT verwenden sollten

Es gibt auch klare Szenarien, in denen Die Verwendung von Pfeilfunktionen ist keine gute Idee. und eine klassische Funktion ist vorzuziehen:

• Objektmethoden Methoden, die auf `this` angewiesen sind, um auf die Eigenschaften des Objekts zuzugreifen. Wenn Sie die Methode als `arrow` definieren, ist `this` nicht das Objekt selbst, sondern der externe Kontext.
• BauherrenPfeilfunktionen können nicht mit new verwendet werden, daher sind sie nicht zum Erstellen von Instanzen geeignet.
• Funktionen, die das Argumentobjekt benötigen Pfeilfunktionen haben keine eigenen Argumente; falls Sie welche benötigen, verwenden Sie eine normale Funktion oder Restparameter (…args).
• Reine Hilfs- oder Hilfsfunktionen kontextunabhängig

Hilfsfunktionen (formatCurrency, calculateTax, kleine mathematische Operationen) Sie sollten sich nicht darauf verlassen.In diesen Fällen ist es wichtig, dass sie rein, leicht testbar und frei von Nebenwirkungen sind. Sie können sie mit `function` oder `arrow` schreiben, aber vermeiden Sie unbedingt die Verwendung von `this`.

Bei funktionalen Programmiermustern wird außerdem empfohlen, dass Funktionen nicht vom Kontext abhängen. Je weniger Sie `this` in dieser Art von Code verwenden, desto vorhersehbarer und besser kombinierbar wird er sein. Ihre Codebasis.

Dies in modernen Umgebungen: React und Node.js.

In React mit Klassenkomponenten ist die Verwendung von `this` für die Behandlung von entscheidender Bedeutung. Staat und EigenschaftenEreignisbehandler benötigen Zugriff auf `this.setState` und die Eigenschaften der Komponente. Wenn Sie diese Behandler nicht binden oder Pfeilfunktionen verwenden, erhalten Sie `this undefined`-Fehler, sobald der Benutzer klickt.

Deshalb sieht man solche Muster in vielen Projekten. handleChange = (event) => { … } y onClick={this.handleChange}Diese Pfeilfunktionen sind als Klasseneigenschaften definiert. Sie werden automatisch mit der Instanz verknüpft.Dadurch werden zusätzliche Bindungen im Konstruktor vermieden und das Risiko von Kontextfehlern verringert.

In Node.js verhält sich `this` auf Modulebene Es ist nicht dasselbe wie im Browser.Auf Dateiebene verweist `this` üblicherweise auf `module.exports` (in CommonJS) oder ist in ES-Modulen undefiniert, anstatt auf das globale Objekt. Dies beeinflusst, wie Sie `this` beim Schreiben wiederverwendbarer Bibliotheken und Module verstehen.

Die Regel bleibt in jedem Fall dieselbe: Pfeilfunktionen erben die `this`-Eigenschaft von der Umgebung, in der sie definiert sind.In Node ist das das Modul oder die Klasse, in der Sie sich befinden, die bestimmt, wie Sie Ihre APIs gestalten und wie Sie Methoden für andere Dateien zugänglich machen.

Verwendung von JavaScript in Umgebungen wie Appsmith

Auf Low-Code-/No-Code-Plattformen wie Appsmith können Sie schreiben JavaScript in fast jeder Widget-Eigenschaft (Text, Farbe, sichtbar, deaktiviert usw.) mithilfe von Ausdrücken innerhalb von {{ }}. Ausgewertet werden dabei JavaScript-Ausdrücke, die immer einen Wert zurückgeben: eine Zeichenkette, eine Zahl, einen booleschen Wert, ein Objekt usw.

Sie können auch definieren Normale Funktionen, Ausdrücke und Pfeilfunktionen innerhalb von JSObjectsDies sind JavaScript-Codeblöcke mit einem `export default { … }`. Wichtig ist, dass auf der obersten Ebene eines JSObjects Eigenschaften und Methoden als durch Kommas getrennte Schlüssel-Wert-Paare definiert werden und dass sich das `this` dieser Methoden je nach Art der Funktion (klassische Funktion oder Pfeilfunktion) unterschiedlich verhält.

Als bewährte Vorgehensweise in JSObjects ist es üblich, Verwenden Sie normale Funktionen als Hauptmethoden (um Verwechslungen mit `this` zu vermeiden) und verschachtelte Pfeilfunktionen innerhalb dieser Methoden als Rückruffunktionen für Filter, Maps, Reduktionen usw. Dieses Muster ermöglicht es Ihnen, die kompakte Syntax von Pfeilen zu nutzen, ohne die Kontextverwaltung zu verkomplizieren.

Bewährte Methoden zur Beherrschung dieser und der Pfeilfunktionen

Um diese Tools optimal zu nutzen, ohne dabei den Überblick zu verlieren, gibt es einige Richtlinien, die es wert sind, beachtet zu werden:

• Geben Sie den Kontext explizit an.Im Zweifelsfall sollten Sie Bind- oder Arrow-Funktionen verwenden, um deutlich zu machen, welches `this` Sie verwenden möchten.
• Verwenden Sie Pfeilfunktionen für Rückruffunktionen. fast immer, insbesondere in asynchronem Code und Array-Methoden, um zu vermeiden, dass das äußere `this` verloren geht.
• Vermischen Sie Stile nicht unnötig.Wenn Sie in einer Klasse Pfeilmethoden für Handler verwenden, sollten Sie dieses Muster aus Gründen der Konsistenz im gesamten Bauteil beibehalten.
• 'use strict' aktivieren oder nutzen Sie Umgebungen, die bereits den strikten Modus anwenden, damit Fehler in diesem Bereich früher erkannt werden.
• Vermeiden Sie es, sich bei Hilfsfunktionen auf `this` zu verlassen.Je reiner sie sind, desto einfacher lassen sie sich testen und wiederverwenden.

Verstehen Sie gut Wie und wann man Pfeilfunktionen verwendet und was ihr lexikalisches Verhalten impliziertDies, zusammen mit den Bindungsregeln regulärer Funktionen, versetzt Sie in eine deutlich bessere Lage, modernes JavaScript zu schreiben. Mit etwas Übung werden Sie `this` nicht mehr als tückischen Feind, sondern als mächtiges Werkzeug sehen, das Sie in jedem Kontext – vom Browser über Node.js bis hin zu Frameworks wie React – leicht beherrschen können.