Was ist das Schlüsselwort This in JavaScript??

Wenn Sie in Java, C ++ oder einer anderen Sprache programmiert haben, müssen Sie mit dem Schlüsselwort „This“ vertraut sein. In JavaScript funktioniert es jedoch etwas anders. Es ist anders, weil JavaScript einen strengen Modus bietet. In dem strengen Modus können wir keine nicht deklarierten Variablen verwenden. Der strenge Modus hilft auch beim Debuggen.

Das Schlüsselwort "Dies" wird in fast jeder Programmiersprache häufig verwendet. Es ist jedoch auch das verwirrendste Konzept. Wenn Sie ein Anfänger sind, machen Sie sich keine Sorgen, heute werden wir fast alles über das Schlüsselwort „This“ in JavaScript zusammen mit Beispielen behandeln. Setzen Sie sich also fest und lassen Sie die Fahrt beginnen.

Was ist das Schlüsselwort "dieses"

Die einfachste Definition des Schlüsselworts „This“ ist, dass es auf ein Objekt verweist oder auf ein Objekt bezieht, zu dem es gehört. Wir können auch sagen, dass es auf dieses Objekt verweist, das derzeit die Funktion/Methode aufruft.

Nachdem wir wissen, was das Schlüsselwort „dieses“ bedeutet, lassen Sie uns herausfinden, wo es verwendet wird. Der Wert des Schlüsselworts „This“ unterscheidet sich auch basierend darauf, wo es verwendet wird.

Verwenden Sie "dieses" Schlüsselwort allein

Das Schlüsselwort "Dies" kann allein ohne Methode verwendet werden. Anschließend enthält es den Hinweis auf das globale Objekt. Zum Beispiel:

const xyz = this;
Alarm (xyz);

In diesem Beispiel haben wir eine Variable initialisiert, die den Verweis auf das globale Objekt speichert. Es sollte beachtet werden, dass das globale Objekt des Browserfensters [Objektfenster] ist. Wenn wir den folgenden Code ausführen, erhalten wir den folgenden Alarm:

Wir können das Schlüsselwort "This" auch mit dem Strict -Modus allein verwenden. Die Lösung ist die gleiche I-e, die die [Objektfenster] -Ame zeigt. Der Code sieht so aus:

const xyz = this;
Alarm (xyz);

Verwenden Sie das Schlüsselwort "dieses" in der Funktion

Die Verwendung des Schlüsselworts "this" in einer Funktion ist der Standardweg. Das Schlüsselwort "dieses" bezieht sich auch auf das globale Objekt in einer Funktion. Zum Beispiel:

Funktion myfunc ()
alarm (dies);

myfunc ();

Wenn wir dieses Schlüsselwort jedoch im strengen Modus verwenden, ist das Ergebnis nicht definiert. Dies liegt daran, dass JavaScript im strengen Modus die Standardbindung einschränkt. Zum Beispiel:

strikt verwenden ";
Funktion myfunc ()
alarm (dies);

myfunc ();

In diesem Beispiel haben wir "Strikt verwenden" verwendet. Wir werden undefiniert zurückgegeben, wenn wir diesen Code ausführen.

Verwenden Sie das Schlüsselwort "dieses" in Ereignishandlern

Event -Handler kümmern sich um Events. Wenn Sie beispielsweise auf eine Schaltfläche klicken, wird dieser Klick von Ereignishandlern behandelt. Wenn wir uns auf dieses Schaltflächenelement in HTML beziehen möchten, aus dem wir das Klicken erhalten haben, verwenden wir das Schlüsselwort "This".
Angenommen, wir haben einen Knopf. Wir möchten es verschwinden lassen, sobald wir darauf klicken. Wir werden es durch den folgenden Code erreichen:

HTML:

Klicken Sie auf mich, um Magie zu sehen

JavaScript:

const btn = dokument.QuerySelector (".VANISH-BTN ");
Btn.AddEventListener ('Click', function ()
Das.Stil.display = "keine";
)

In diesem Code haben wir in HTML zuerst eine Schaltfläche mit dem Klassennamen "VANISH-BTN" erstellt. Danach setzen wir das Skript -Tag, auf das wir den Dateinamen von JavaScript verwiesen haben. In der JavaScript -Datei erhalten wir zunächst die Referenz der Schaltfläche in „BTN“ mit Hilfe des Klassennamens. Danach setzen wir einen Ereignishörer mit dem Klick auf eine Schaltfläche. In dieser Taste wird die Rückruffunktion dort ausgeführt, wo wir die Anzeige der Schaltfläche nicht erstellt haben.

Bevor Sie auf die Schaltfläche klicken, sieht der Browser wie folgt aus:

Wenn wir auf die klicken Klicken Sie auf mich, um Magie zu sehen Button Es wird verschwinden.

Objektmethodenbindung

Wir werden zuerst einige Beispiele geben und dann diskutieren wir es, um das Konzept zu erfassen. Beachten Sie jedoch, dass das Schlüsselwort „Dies“ das im folgende Beispiel definierte Spielerobjekt oder das übergeordnete Objekt, auf das es sich bezieht.

const player =
Name: "Hazard",
Club: "Chelsea",
Shirtno: 10,
myfunc: function ()
Geben Sie dies zurück.Name;

;
Alarm (Spieler.myfunc () + spielt für " + player.Verein);

In diesem Beispiel haben wir ein Objekt mit dem Namen "Spieler" eingeleitet. Wir haben seine Eigenschaften wie Name, Club und Hemdnummer angegeben. Danach haben wir eine Funktion gemacht. Am Ende alarmieren wir die Spielerobjektfunktion und den Verein, für den er spielt. Dies wird in der verwendet myfunc () Funktion. Darin bezieht es sich auf den Spielernamen mit den Schlüsselwörtern „This. Name". Das Ergebnis innerhalb eines Alarms sieht so aus:

Schlüsselwort "dies" in einer Pfeilfunktion

Die Pfeilfunktionen wurden erstmals in der ES6 -Version eingeführt und haben eine ähnliche Funktion wie eine Standard -JavaScript -Funktion, mit der Ausnahme, dass Pfeilfunktionen die Syntax verkürzen.
Zum Beispiel:

Funktion myfunc ()
Rückkehr "Champions of Europe"

myfunc ();

Dies kann geschrieben werden als:

const myfunc = () =>
Rückkehr "Champions of Europe";

Das Schlüsselwort „Dies“ wird in einer Pfeilfunktion anders behandelt als in der Standardfunktion. Um genau zu sein, haben Pfeilfunktionen das Schlüsselwort "this" keine Bindung. Außerdem bezieht sich das Schlüsselwort „this“ auf die Variable oder das Objekt, das die Pfeilfunktion definiert hat.
Zum Beispiel:

const player = () => (
Name: "Hazard",
Club: "Chelsea",
Shirtno: 10,
myfunc: function ()
Geben Sie dies zurück.Name;

);
Alarm (Player ().myfunc ());

Das Schlüsselwort "Dies" hier wurde auf den Spieler als den Spieler bezeichnet, als der Spieler die Pfeilfunktion definierte.

Abschluss

In diesem Artikel haben wir diskutiert, was „dieses“ Schlüsselwort ist und wie es verwendet wird. Wir haben auch diskutiert, wo und wie wir das Schlüsselwort „This“ verwenden können. All dies mit Hilfe von Beispielen. Das Schlüsselwort „dieses“ ist ein wichtiges Konzept von JavaScript und hauptsächlich mit Anfängern kämpfen damit. Wir hoffen, dass dieser Beitrag alle Unklarheiten geklärt hat, die Sie möglicherweise hatten.