Einführung

Sind Sie bereit, in die unterhaltsame Welt von JavaScript einzutauchen und mehr über die geheime Kraft des Schlüsselworts „this“ zu erfahren? Bereiten Sie sich auf eine erstaunliche Reise durch das interessante Reich von „dies“ vor, bei der Sie die Ursachen seiner Aktionen aufdecken und die volle Leistungsfähigkeit Ihres Codes erkennen. Mit spannenden Beispielen und kristallklaren Erklärungen nimmt Sie dieser Leitfaden mit auf eine spannende Reise durch die verschiedenen Bindungen von „this“. Am Ende dieser Reise sind Sie für alle Programmierschwierigkeiten gerüstet und verfügen über das Selbstvertrauen, robuste und skalierbare Systeme aufzubauen. Also ohne weitere Umschweife, schnallt eure Code-Stiefel an und lasst uns durch die unbekannten Gebiete des Schlüsselworts „dies“ reisen!

Das Schlüsselwort „this“ in JavaScript bezieht sich auf das Objekt, dessen Methode die aktuelle Funktion ist. Es handelt sich um eine Variable mit dynamischem Gültigkeitsbereich, was bedeutet, dass sich ihr Gültigkeitsbereich je nach Kontext des Funktionsaufrufs während der Laufzeit ändert. „Dies“ ist ein wichtiges und häufig missverstandenes Konzept in JavaScript, da die Bedeutung je nach Kontext, in dem es verwendet wird, erheblich variieren kann.

Bindungen von „diesem“

Das Schlüsselwort „this“ hat in JavaScript vier Hauptbindungen: Standardbindung, implizite Bindung, explizite Bindung und neue Bindung. Das Verständnis dieser Bindungen ist für die effektive Verwendung des Schlüsselworts „this“ in JavaScript von entscheidender Bedeutung, da sie jeweils angeben, wie „this“ in einem bestimmten Kontext verwendet werden soll.

1. Standardbindung

Wenn der Begriff „this“ außerhalb einer Funktion oder im globalen Bereich in JavaScript verwendet wird, ist er standardmäßig gebunden. In diesem Fall bezieht sich „this“ auf das globale Objekt, das entweder „window“ in einem Browser oder „global“ in Node.js ist.

Hier ist ein Beispiel für die Standardbindung in Aktion:

Wie aus der ersten console.log-Anweisung hervorgeht, bezieht sich das Schlüsselwort „this“ im obigen Beispiel auf das globale Objekt, wenn es außerhalb einer Funktion verwendet wird. Der zweite console.log-Satz zeigt, dass er bei Verwendung innerhalb der logThis-Funktion auch auf das globale Objekt verweist.

Es ist wichtig, sich daran zu erinnern, dass im strikten Modus das globale Objekt undefiniert ist und nicht der Wert von „this“ im globalen Bereich. Sie können den strikten Modus aktivieren, indem Sie „use strict“ am Anfang Ihres Codes oder innerhalb einer Funktion hinzufügen, wie unten gezeigt.

2. Implizite Bindung

Das Schlüsselwort „this“ in dieser Bindung bezieht sich auf das Objekt, dessen Eigenschaft die Funktion ist. „this“ gibt das Objekt an, wenn eine Funktion als Methode eines Objekts verwendet wird. Das Objekt, dessen Eigenschaft die Funktion ist, bestimmt den Wert von „diesem“.

Nimm zum Beispiel,

Die Funktion „ begrüßen “ ist ein Attribut des Objekts „ Person “ im obigen Beispiel. Wir können auf die Namenseigenschaft des „ Person “-Objekts zugreifen, indem wir person.greet() aufrufen, wodurch der Wert dieser Eigenschaft innerhalb der Greet-Methode auf das Personenobjekt festgelegt wird. In dieser Situation kann eine implizite Bindung beobachtet werden. Dies veranschaulicht die implizite Bindung.

Schauen wir uns ein anderes Beispiel an:

In diesem Beispiel ist für das Objekt „ lehrer “ die Funktion „ sayName “ als Eigenschaft festgelegt, und wenn teacher.say() aufgerufen wird, wird das Objekt „ structor “ als Wert von „ this “ in der Funktion „ sayName “ festgelegt . Dies ist ein weiteres Beispiel für implizite Bindung.

3. Explizite Bindung

Unabhängig davon, wie oder wo eine Funktion im Code aufgerufen wird, können Sie den Wert von „ this “ für einen Aufruf mithilfe einer expliziten Bindungsmethode explizit festlegen.

In JavaScript gibt es drei Methoden der expliziten Bindung: „ call “, „ apply “ und „ bind “.

Sie können eine Funktion mit der Methode „ call “ aufrufen und auch den Wert von „ this “ für diesen Funktionsaufruf festlegen . Der Wert, den Sie für „ this “ festlegen möchten, ist das erste Argument der Aufrufmethode, und die anderen Argumente werden einzeln an die Funktion gesendet.

Nehmen Sie zum Beispiel:

Im obigen Beispiel wird die Methode „ call “ verwendet, um die Funktion „ sayName “ aufzurufen, und der Wert von „ this “ wird auf das Lehrerobjekt gesetzt.

Ähnlich wie „ call “ ist die Methode „ apply“ , außer dass sie ein Array von Argumenten anstelle einzelner Argumente akzeptiert.

Schauen wir uns ein Beispiel an:

Im obigen Beispiel wurde die Methode „ applysayName “ verwendet, um die Funktion aufzurufen und den Wert von „ this “ auf das Objekt „ structor “ zu setzen. Die Argumente der Funktion werden als Array übergeben.

Die Methode „ bind “ erstellt eine neue Funktion unter Verwendung des ersten an „bind“ übergebenen Arguments als Wert von „this“. Das an „bind“ übergebene Argument wird als Wert von „this“ innerhalb der ursprünglichen Funktion festgelegt, wenn die neue Funktion später aufgerufen wird.

Hier ist ein Beispiel:

Im obigen Beispiel wurde die Methode „ bind “ verwendet, um eine neue Funktion „ lehrerSayName “ zu erstellen, indem „ this “ auf das Objekt „ lehrer “ gesetzt wurde. Als später die Funktion „ teacherSayName “ aufgerufen wurde, wurde der Wert von „ this “ innerhalb der Funktion „ sayName “ auf das Objekt „ teacher “ gesetzt , genau so, als hätten wir „ call “ oder „ apply “ verwendet.

4. Neue Bindung

Der Vorgang, durch den das Schlüsselwort „ this “ an ein neu erstelltes Objekt gebunden wird, wenn eine Funktion mit dem Operator „ new “ aufgerufen wird, wird als „ new “-Bindung bezeichnet .

Wenn eine Funktion mit dem Operator „ new “ aufgerufen wird , wird ein neues Objekt erstellt und das Schlüsselwort „ this “ innerhalb der Funktion auf dieses neu erstellte Objekt gesetzt. Zusätzlich wird der Prototyp des neu erstellten Objekts auf die Prototypeigenschaft der Funktion gesetzt.

Nehmen Sie zum Beispiel:

Im obigen Beispiel wird ein neues Objekt erstellt, indem der Operator „ new “ verwendet wird, um die Funktion „ Person “ aufzurufen . Dem Objekt werden die Eigenschaften „ name “ und „ greet “ hinzugefügt und das Schlüsselwort „ this“ innerhalb der Funktion „ Person “ wird auf das neu generierte Objekt gesetzt.

Es ist wichtig zu bedenken, dass das neu erstellte Objekt zurückgegeben wird, ohne dass eine „return“-Anweisung erforderlich ist, wenn eine Funktion mit dem „new“-Operator aufgerufen wird. Wenn eine „return“-Anweisung verwendet wird und diese ein Objekt zurückgibt, wird dieses Objekt anstelle des neu erstellten Objekts zurückgegeben. Wenn eine „return“-Anweisung verwendet wird und diese einen Nicht-Objektwert zurückgibt, wird das neu erstellte Objekt trotzdem zurückgegeben.

Pfeilfunktion und „dies“

Die Pfeilfunktionen von JavaScript bieten eine Verknüpfung zum Schreiben anonymer Funktionen (Funktionen ohne Namen). Die Art und Weise, wie sie das Schlüsselwort „this“ binden, unterscheidet sie von herkömmlichen Funktionsausdrücken.

Der Wert von „this“ in herkömmlichen Funktionsausdrücken hängt davon ab, wie die Funktion aufgerufen wird. Wie bereits erläutert, kann sie explizit mit den Befehlen „call“, „apply“ oder „bind“ oder implizit festgelegt werden, je nachdem, welches Objekt die Funktion enthält.

Bei Pfeilfunktionen bestimmt jedoch der Kontext, in dem die Pfeilfunktion generiert wurde, und nicht die Art und Weise, wie sie aufgerufen wird, den Wert von „this“. Das heißt, wenn sich eine Pfeilfunktion nicht in einer anderen Funktion befindet, verweist das Schlüsselwort „this“ innerhalb der Pfeilfunktion immer auf den „this“-Wert der äußeren Funktion oder des globalen Objekts.

Einfach ausgedrückt haben Pfeilfunktionen keinen eigenen „diesen“ Wert; Stattdessen erben sie den Wert „this“ vom umschließenden Bereich.

Zum Beispiel:

Hier ist ein weiteres Beispiel einer Pfeilfunktion, die auf das Schlüsselwort „this“ der äußeren Funktion verweist:

Im obigen Beispiel wurde die Funktion „ Begrüßen “ als Pfeilfunktion innerhalb der Funktion „ Person “ definiert. Der „ this “-Wert in der Pfeilfunktion entsprach dem „ this “-Wert der „Person“-Funktion, der dem neu generierten Objekt „ elie “ zugewiesen wurde, als die „ greet “-Funktion aufgerufen wurde.

Es muss erwähnt werden, dass die Verwendung von „call“, „apply“ oder „bind“ die „this“-Bindung in Pfeilfunktionen nicht ändern kann. Unabhängig von der zum Aufrufen der Funktion verwendeten Methode bleibt der „this“-Wert innerhalb einer Pfeilfunktion derselbe. Dies macht Pfeilfunktionen besonders nützlich für Rückrufe und Ereignishandler, bei denen sich der Wert von „this“ häufig unerwartet ändert.

Abschluss

Zusammenfassend lässt sich sagen, dass das Erlernen des JavaScript-Schlüsselworts „this“ ein entscheidender Schritt auf dem Weg zu einem echten JavaScript-Experten ist. Dieses wesentliche, aber oft verwirrende Konzept kann über Erfolg oder Misserfolg Ihres Codes entscheiden und ist der Schlüssel zur Nutzung der vollen Leistungsfähigkeit der Sprache. Sie können Code schreiben, der nicht nur effizienter, sondern auch eleganter und dynamischer ist, wenn Sie die Standardbindung, die implizite Bindung, die explizite Bindung und die neue Bindung, die die vier grundlegenden Bindungen von „diesem“ sind, gründlich verstehen. . Die Fähigkeit, flexiblen, anpassungsfähigen und skalierbaren Code zu entwickeln, der wachsen und sich weiterentwickeln kann, wenn sich Ihre Projekte und Anforderungen ändern, ermöglicht es Ihnen, jede Herausforderung anzunehmen, die sich Ihnen stellt. Nehmen Sie also das Schlüsselwort „this“ an, beherrschen Sie es und werden Sie ein echter JavaScript-Ninja!