This "Keyword in JavaScript - Wie verwende ich" this "Keyword? - Beispiele

Inhaltsverzeichnis:

Anonim

Was ist das Schlüsselwort in JavaScript?

Da wir wissen, dass Objekte die Grundbausteine ​​in JavaScript sind, gibt es ein spezielles Objekt, das auch als "this" -Objekt bezeichnet wird. Der Wert von "this" wird in jeder Zeile der JavaScript-Ausführung angezeigt, die wiederum auf der Grundlage des Codes festgelegt wird ausgeführt wird. In diesem Thema lernen wir das Schlüsselwort "this" in JavaScript kennen.

Bedeutung des Schlüsselworts "this" in JavaScript

  • Das 'this'-Objekt in JavaScript hat viele wichtige Rollen und Verwendungen. Es wird hauptsächlich verwendet, um auf eine Instanz eines Objekts aus einer eigenen Methode oder einem eigenen Konstruktor zu verweisen. Zusammen mit dem Zeigen kann 'this' auch verwendet werden, um die Kontextausführung zu verfolgen, die darauf basiert, wo die Funktion aufgerufen wird.
  • Das Nächste an dieser Funktion in JavaScript ist, dass sich die Verknüpfung zum Ausführungskontext ändern kann. Und schließlich kann die Verknüpfung zum Ausführungskontext auch hergestellt werden, wenn er von einer Rückruffunktion referenziert wird, obwohl die Funktion im Konstruktorobjekt definiert ist.

Warum sollte dieses Keyword in JavaScript verwendet werden?

  • In JavaScript wird das Schlüsselwort "this" in vielen Kontexten verwendet, um die Kontexte optimal zu nutzen. Grundsätzlich wird dieses Schlüsselwort verwendet, um auf ein Objekt oder eine Funktion in JavaScript zu verweisen. Wie durch das Wort (dieses) selbst können wir verstehen, dass es sich auf etwas bezieht. Um dies auf praktische Weise besser zu verstehen, können wir ein Beispiel betrachten, in dem Herr X Cricket gespielt und das Spiel gewonnen hat.
  • Anstelle von Mr. X haben wir also 'he' verwendet, was sich nur auf Mr. X bezieht. Es hilft uns, nicht immer wieder dasselbe zu erwähnen. Ebenso können wir in JavaScript auch 'diese' Funktion oder dieses Objekt verwenden, um auf eine andere Funktion oder ein anderes Objekt mit dem Wert zu verweisen, der in dieser Funktion oder diesem Objekt aufgerufen wird. Normalerweise wird 'this' in einer Funktion oder Methode verwendet, aber es kann auch außerhalb der Funktion (im globalen Bereich) verwendet werden.

Wie verwende ich dieses Keyword?

  • Da wir wissen, dass JavaScript eine Skriptsprache ist, müssen die Codes nicht kompiliert werden, sondern werden zur Laufzeit ausgeführt. Es kann direkt vom Interpreter Zeile für Zeile ausgeführt werden. Die Umgebung oder der Bereich, in dem die JavaScript-Codes ausgeführt werden, wird als „Ausführungskontext“ bezeichnet.
  • Die JavaScript-Laufzeit verwaltet einen Stapel von Ausführungskontexten und behält den aktuellen Stapel im Vordergrund. Das Objekt, auf das mit "this" verwiesen wird, wird jedes Mal geändert, wenn der Ausführungskontext geändert wird.
  • Wir können einfach davon ausgehen, dass beim Erstellen einer Funktion gleichzeitig ein Schlüsselwort "this" erstellt wird (hinter den Kulissen), das auf das Objekt verweist, in dem die Funktion ausgeführt wird. Das Schlüsselwort 'this' funktioniert in JavaScript anders als in anderen Programmiersprachen.

Es hat verschiedene Werte, abhängig davon, wo wir es verwenden, zum Beispiel:

  • 'this' bezieht sich auf das Eigentümerobjekt in einer Methode.
  • "dies" bezieht sich auf das globale Objekt in der Einzelsituation.
  • 'this' bezieht sich auch in einer einfachen Funktion auf die globalen Objekte.
  • 'this' bezieht sich auf ein Element in einem Ereignis, das das Ereignis empfängt.
  • 'this' ist in einer Strict-Mode-Funktion undefiniert.

1. Wird mit einem Feld verwendet

Beispiel : Im Folgenden bezieht sich "dies" auf ein Objekt, das als Person bezeichnet wird. Und die Person ist der Eigentümer der Methode fullName.

var employee = (
firstName: “Raju”,
lastName: “Chaudhury”,
id: 123
fullName: function() (
return this.firstName + “ ” + this.lastName;
)
)

Ein kurzes Beispiel für ein Formularfeld:


check to alert this object name

Geben Sie einen Namen ein und aktivieren Sie die unten stehende Option, um Ihre Eingabe zu warnen

Aktivieren Sie diese Option, um die Eingabe von Textfeldern zu warnen

Beachten Sie beim Öffnen des Formulars den Ereignishandler onsubmit, um die Aktion anzuzeigen, die ausgeführt wird, wenn auf die Schaltfläche submit geklickt wird

2. Wird zum Aufrufen eines Konstruktors verwendet

Wenn wir das Schlüsselwort 'new' verwenden, um eine Instanz für ein Funktionsobjekt zu erstellen, verwenden wir normalerweise die Funktion als Konstruktor.

Im folgenden Beispiel deklarieren wir eine Bike-Funktion und rufen sie dann als Konstruktor auf:

function Bike(name)(
this.name = name;
)
Bike.prototype.getName = function()(
return this.name;
)
var bike = new Bike('Pulsar');
console.log(bike.getName());

Im obigen Beispiel ist das neue Fahrrad ('Pulsar') ein Konstruktor der Fahrradfunktion. Hier erstellt JavaScript ein neues Objekt und fügt dem neu erstellten Objekt das Schlüsselwort "this" hinzu. Jetzt können wir Bike () als Funktion oder als Konstruktor aufrufen. Wenn wir hier das Schlüsselwort "new" entfernen, wird der folgende Fehler angezeigt:

var bajaj = Bike('Bajaj');
console.log(bajaj.name);

/ * Es wird als TypeError angezeigt: Kann Eigenschaft 'Name' von undefined nicht lesen * /

Da diese Funktion in Bike () auf das globale Objekt angewendet wird, ist bajaj.name undefiniert.

Damit die Bike () -Funktion immer mit einem Konstruktor aufgerufen wird, überprüfen wir beim Starten der Bike () -Funktion Folgendes:

function Bike(name)(
if( ! (this instanceof Bike)(
throw Error(“We should use new operator to call a function”);
)
this.name = name;
)

Es gibt eine Metaproperty namens "new.target", mit der festgestellt werden kann, ob eine Funktion als einfacher Aufruf oder Konstruktor aufgerufen wird.

Hier können wir die Bike () -Funktion, die die Metaproperty new.target verwendet, wie unten beschrieben bearbeiten

function Bike(name)(
if( ! new.target)(
throw Error(“We should use new operator to call a function”);
)
this.name = name;
)

3. Wird verwendet, um die aktuelle Klasseninstanz zurückzugeben

Ein Klassenausdruck ist auch eine Möglichkeit, eine Klasse in JavaScript zu definieren. Es kann auch benannt oder unbenannt sein. Das benannte ist das lokale Element seines Klassenkörpers und kann über die Klasseneigenschaften abgerufen werden.

/ * Beispiel für einen unbenannten Klassenausdruck * /

let Mobile = class (
constructor(cost, weight)(
this.cost = cost;
this.weight = weight;
)
);
console.log(Mobile.name); //Output: Mobile

/ * Beispiel für einen benannten Klassenausdruck * /

let Mobile = class Mobile2(
constructor(cost, weight)(
this.cost = cost;
this.weight = weight;
)
);
console.log(Mobile.name);

Ausgabe: Mobile2

4. Wird als Methodenparameter verwendet

Wenn wir eine Methode eines Objekts aufrufen, setzt JavaScript 'this' auf das Objekt, dem die Methode gehört.

Beispiel:

var Bike = (
name: 'Pulsar',
getName: function()(
return this.name;
)
)
console.log(bike.getName()); /*Pulsar*/

Hier bezieht sich diese Methode in getName () auf ein Bike-Objekt.

Fazit

Das Schlüsselwort 'this' in JavaScript ist ein leistungsstarkes Tool, mit dem die Entwickler in der Regel die Eigenschaften in bestimmten Kontexten referenzieren können. Manchmal kann es jedoch auch schwierig sein, die verschiedenen Gültigkeitsbereiche zu durchlaufen. Der Wert von 'this' kann auch explizit mit call (), bind () und apply () festgelegt werden. Normalerweise wird der Wert von 'this' durch den Ausführungskontext der Funktion bestimmt. Pfeilfunktionen binden normalerweise nicht "dies" und stattdessen wird "dies" lexikalisch gebunden.

Empfohlene Artikel

Dies ist eine Anleitung zu diesem Schlüsselwort in JavaScript. Hier diskutieren wir die Wichtigkeit und die Verwendung des Schlüsselworts "this" in JavaScript zusammen mit dem Beispiel. Sie können sich auch den folgenden Artikel ansehen.

  1. Kapselung in JavaScript
  2. Einfügesortierung in JavaScript
  3. Palindrom in JavaScript
  4. JavaScript-Compiler
  5. dieses Schlüsselwort in Java | Beispiele für dieses Schlüsselwort
  6. Regeln von instanceOf in Java mit Example