JavaScript-Schlüsselwort this

In objektorientierten Sprachen stellt this eine Referenz auf das aktuelle Objekt dar.

In JavaScript ist this jedoch nicht fest; es ändert sich mit der Ausführungsumgebung.

  • In einer Methode verweist this auf das Objekt, dem die Methode gehört.
  • Wird this allein verwendet, verweist es auf das globale Objekt.
  • In einer Funktion verweist this auf das globale Objekt.
  • In einer Funktion ist this im Strict-Modus undefined.
  • Bei einem Event verweist this auf das Element, das das Event empfängt.
  • Methoden wie call() und apply() können this an jedes Objekt binden.

Beispiele

var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } };

Selbst ausprobieren »

this in Methoden

In einer Objektmethode verweist this auf das Objekt, das die Methode aufruft, in der es sich befindet.

Im obigen Beispiel steht this für das person-Objekt.

Das Objekt, das die fullName-Methode besitzt, ist person.

Beispiele

fullName : function() { return this.firstName + " " + this.lastName; }

Selbst ausprobieren »

this allein verwenden

Wenn this allein verwendet wird, verweist es auf das globale Objekt.

In einem Browser ist window das globale Objekt [object Window]:

Beispiele

var x = this;

Selbst ausprobieren »

Im strict mode verweist this, wenn es allein verwendet wird, ebenfalls auf das globale Objekt.

Beispiele

"use strict"; var x = this;

Selbst ausprobieren »

this in Funktionen verwenden (Standard)

In einer Funktion ist der Eigentümer der Funktion standardmäßig an this gebunden.

In einem Browser ist window das globale Objekt [object Window]:

Beispiele

function myFunction() { return this; }

Selbst ausprobieren »

Verwendung von this in Funktionen (Strict Mode)

Im Strict Mode ist die Funktion nicht an this gebunden, und zu diesem Zeitpunkt ist thisundefined。

Beispiele

"use strict"; function myFunction() { return this; }

Selbst ausprobieren »

this bei Events

In HTML-Event-Handlern verweist this auf das HTML-Element, das das Ereignis empfängt:

Beispiele

<button onclick="this.style.display='none'"> Klick auf mich und ich verschwinde </button>

Selbst ausprobieren »

Bindung in Objektmethoden

Im folgenden Beispiel ist this das person-Objekt; das person-Objekt ist der Eigentümer der Funktion:

Beispiele

var person = { firstName : "John", lastName : "Doe", id : 5566, myFunction : function() { return this; } };

Selbst ausprobieren »

Beispiele

var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } };

Selbst ausprobieren »

Erklärung:this.firstNamerepräsentiertthisdas (person-)Objekt-Attribut namensfirstNameEigenschaft.

Explizite Funktionsbindung

In JavaScript sind Funktionen auch Objekte; Objekte haben Methoden, und apply und call sind Methoden von Funktionsobjekten. Diese beiden Methoden sind äußerst mächtig; sie ermöglichen das Umschalten des Ausführungskontexts einer Funktion, d. h. des Objekts, an das this gebunden ist.

Im folgenden Beispiel, wenn wir person2 als Argument verwenden, um die Methode person1.fullName aufzurufen,thisthis wird auf person2 zeigen, obwohl es eine Methode von person1 ist:

Beispiele

var person1 = { fullName: function() { return this.firstName + " " + this.lastName; } } var person2 = { firstName:"John", lastName: "Doe", } person1.fullName.call(person2); //Gibt "John Doe" zurück

Selbst ausprobieren »
Andere Erweiterungen