Wie verhält sich das Schlüsselwort „this' in JavaScript-Objektliteralen?

Das Schlüsselwort „this“ in JavaScript-Objektliteralen verstehen

Innerhalb von Objektliteralen in JavaScript kann das Verhalten des Schlüsselworts „this“ ganz anders sein aus anderen Programmiersprachen. Hier ist eine umfassende Erklärung, wie es funktioniert.

Anrufzeitbindung

Im Gegensatz zu anderen Sprachen mit später Bindung bindet JavaScript „dies“ zur Aufrufzeit und nicht während der Kompilierung Zeit oder Laufzeit. Das bedeutet, dass der Wert von „this“ davon abhängt, wie die Funktion aufgerufen wird.

Bindungsregeln

Die Bindungsregeln für „this“ in JavaScript-Objektliteralen lauten wie folgt folgt:

1. Konstruktoraufrufe: Wenn eine Funktion mit dem Schlüsselwort „new“ aufgerufen wird, wird die Das Schlüsselwort „this“ bindet an das neu erstellte Objekt.
2. Objektmethoden: Wenn es als Objektmethode aufgerufen wird, bindet „this“ an das Objekt, zu dem die Methode gehört, also das Objekt davor der letzte Punkt.
3. Globaler Geltungsbereich: Außerhalb einer Funktion oder wenn eine Funktion ohne Objektkontext aufgerufen wird, bindet „this“ an den globalen Bereich Objekt, das „window“ im Webbrowser anzeigt.
4. Ereignishandler: In Ereignishandlern bindet „this“ normalerweise an das DOM-Element, das das Ereignis ausgelöst hat.
5. Methoden „Call()“ und „Apply()“: Die Methoden „call()“ und „apply()“ können verwendet werden, um „this“ explizit jedem zuzuweisen Objekt, wodurch ein Objekt auf die Methoden eines anderen Objekts zugreifen kann.
6. Function.bind(): Die Methode „Function.bind()“ kann auch verwendet werden, um „this“ explizit daran zu binden ein bestimmtes Objekt, wodurch eine neue Funktionsinstanz mit der gewünschten Bindung erstellt wird.

Beispielanwendungsfälle

Zu Veranschaulichen Sie die verschiedenen Bindungsregeln:

const obj = {
  foo: "Foo",
  bar() {
    console.log(this.foo); // "Foo" - "this" refers to the object
  },
};

obj.bar(); // Calls the method, binding "this" to the object

function MyDate(date) {
  this.date = date;
}

const obj1 = {
  foo: new Date(),
  bar: new MyDate(this.foo), // Error: this.foo is undefined
};

const obj2 = {
  foo: new Date(),
  bar: new MyDate(obj2.foo), // Works: "this" refers to obj2
};

Im ersten Beispiel bezieht sich „this“ auf das Objekt „obj“, da die Methode als Objektmethode aufgerufen wird. Im zweiten Beispiel ist „this“ in „obj1“ undefiniert, da die Funktion ohne Objektkontext aufgerufen wird. In „obj2“ bezieht sich „this“ auf „obj2“, da die Funktion explizit mit dem „this“-Objekt aufgerufen wird.

Das obige ist der detaillierte Inhalt vonWie verhält sich das Schlüsselwort „this' in JavaScript-Objektliteralen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!