JavaScript-Keyword-this

Beispiel

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Versuchen Sie es selbst

Was ist this?

JavaScript this der Schlüsselwort bezieht sich auf das Objekt, zu dem es gehört.

hat verschiedene Werte, abhängig von seinem Verwendungsort:

  • In der Methode,this bezieht sich auf das Besitzerobjekt.
  • Im Alleinfall,this bezieht sich auf das globale Objekt.
  • In der Funktion,this bezieht sich auf das globale Objekt.
  • In der Funktion, im strengen Modus,this ist undefined.
  • Im Ereignis,this bezieht sich auf das Element, das das Ereignis empfängt.

wie call() und apply() Diese Methode kann this auf jedes Objekt verweisen.

this in der Methode

In Objektmethoden,this bezieht sich auf den "Besitzer" dieser Methode.

Im obigen Beispiel auf dieser Seite,this bezieht sich auf das Objekt "person".

Das Objekt "person" ist der Besitzer der Methode fullName.

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

Versuchen Sie es selbst

alleine this

Wenn alleine verwendet, ist der Besitzer das globale Objekt, daher this bezieht sich auf das globale Objekt.

Im Browserfenster ist das globale Objekt [object Window]:

Beispiel

var x = this;

Versuchen Sie es selbst

Im strengen Modus, wenn allein verwendet, dann this bezieht sich auf das globale Objekt [object Window]:

Beispiel

"use strict";
var x = this;

Versuchen Sie es selbst

this in der Funktion (Default)

In JavaScript-Funktionen wird die Funktion durch Default-Bindung besitzer this.

daher im Funktion,this bezieht sich auf das globale Objekt [object Window].

Beispiel

function myFunction() {
  return this;
}

Versuchen Sie es selbst

this in der Funktion (strenger Modus)

JavaScript strenger Modus erlaubt keine Standardbindung.

daher wird in der Funktion verwendet, im strengen Modus,this bedeutet nicht definiert (undefined})

Beispiel

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

Versuchen Sie es selbst

this im Ereignisbehandler

In HTML-Ereignisbehandlern,this bezieht sich auf das HTML-Element, das dieses Ereignis empfängt:

Beispiel

<button onclick="this.style.display='none'">
  Klicken Sie, um mich zu löschen!
</button>

Versuchen Sie es selbst

Objektmethodenbindung

In diesem Beispiel,this ist das Objekt "person" (das Objekt "person" ist der "Besitzer" dieser Funktion):

Beispiel

var person = {
  firstName  : "Bill",
  lastName   : "Gates",
  id         : 678,
  myFunction : function() {
    return this;
  }
};

Versuchen Sie es selbst

Beispiel

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Versuchen Sie es selbst

Mit anderen Wortenthis.firstName bedeutet thisdes firstName Eigenschaften.

Explizite Funktionsbinding

call() und apply() Methoden sind vorgegebene JavaScript-Methode.

Sie können beide verwendet werden, um eine andere Methode als Parameter aufzurufen.

Sie können im Folgenden mehr über sie lesen. call() und apply() weitere Informationen.

Beispiel, wenn person2 als Parameter bei der Aufruf von person1.fullName verwendet wird:this bezieht sich auf person2, selbst wenn es ein person1-Methode ist:

Beispiel

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName: "Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // wird "Bill Gates" zurückgeben

Versuchen Sie es selbst