Was zum Teufel ist das Schlüsselwort „dieses' in JavaScript?

Wichtige Erkenntnisse:

• Globaler Geltungsbereich: Im globalen Kontext bezieht sich dies auf das globale Objekt (z. B. Fenster).

• Funktionskontext: Innerhalb regulärer Funktionen verhält sich dies im strikten und nicht strikten Modus unterschiedlich und gibt undefiniertes oder das globale Objekt zurück.

• Methoden: Bei Objektmethoden bezieht sich dies auf das Objekt selbst und ermöglicht den Zugriff auf seine Eigenschaften.

• Aufrufen, Anwenden, Binden: Diese Methoden ermöglichen die gemeinsame Nutzung von Funktionen zwischen Objekten durch Ändern dieses Kontexts.

• Pfeilfunktionen: Pfeilfunktionen haben kein eigenes this und erben es von ihrem umschließenden lexikalischen Kontext.

• DOM-Elemente: In DOM-Ereignishandlern bezieht sich dies auf das HTML-Element, das das Ereignis ausgelöst hat.

---

Der globale Geltungsbereich

Lassen Sie uns zunächst untersuchen, wie sich „dies“ im globalen Bereich verhält. Wenn Sie in JavaScript auf der obersten Ebene Ihres Codes auf „this“ verweisen, bezieht sich dies auf das globale Objekt. In einem Webbrowser ist dieses globale Objekt das Fenster.

Zum Beispiel:

    console.log(this); // Outputs: Window

In Node.js ist das globale Objekt jedoch anders und wird als global bezeichnet.

Daher kann der Wert von „this“ abhängig von der Umgebung, in der Ihr JavaScript-Code ausgeführt wird, variieren.

---

„Diese“ Inside-Funktionen verstehen

Als nächstes wollen wir untersuchen, wie sich „this“ innerhalb von Funktionen verhält. Wenn Sie eine Funktion definieren und aufrufen, hängt der Wert von „this“ innerhalb dieser Funktion davon ab, wie die Funktion aufgerufen wird.

Wenn Sie „this“ im nicht-strikten Modus innerhalb einer Funktion protokollieren, verweist es auch auf das globale Objekt:

    function test() {
        console.log(this);
    }
    test(); // Outputs: Window

Wenn Sie jedoch den strikten Modus aktivieren, indem Sie „strikt verwenden“ hinzufügen; Am oberen Rand Ihrer Funktion ist „this“ undefiniert:

    'use strict';
    function test() {
        console.log(this);
    }
    test(); // Outputs: undefined

Dieses Verhalten ist ein Ergebnis dieser Substitution, die besagt, dass, wenn „this“ im nicht-strikten Modus null oder undefiniert ist, standardmäßig das globale Objekt verwendet wird.

---

Strenger Modus vs. nicht-strenger Modus

Es ist von entscheidender Bedeutung, den Unterschied zwischen striktem und nicht striktem Modus zu verstehen. Im nicht-strikten Modus kann der Wert von „this“ das globale Objekt sein, aber im strikten Modus wird er undefiniert, wenn er nicht explizit an ein Objekt gebunden ist.

---

Um es noch einmal zusammenzufassen:

• Im globalen Raum bezieht sich „dies“ auf das globale Objekt.
• In einer Funktion kann „this“ im nicht-strikten Modus auf das globale Objekt verweisen, ist im strikten Modus jedoch undefiniert.

---

Wie „dies“ in Objektmethoden funktioniert

Lassen Sie uns nun besprechen, wie sich „this“ innerhalb von Objektmethoden verhält. Wenn eine Funktion innerhalb eines Objekts definiert ist, wird sie als Methode betrachtet und „this“ verweist auf dieses Objekt, wenn die Methode aufgerufen wird:

    console.log(this); // Outputs: Window

Hier bezieht sich „this“ auf „obj“, das Objekt, in dem die Methode definiert ist.

---

Teilen von Methoden mit Call, Apply und Bind

Um Methoden zwischen Objekten zu teilen, bietet JavaScript drei Funktionen: Aufruf, Anwenden und Bind. Bei jedem davon können Sie den Wert von „this“ explizit festlegen:

• Aufruf: Ruft eine Funktion mit einem angegebenen diesem Wert und Argumenten auf.
• apply: Ähnlich wie call, akzeptiert aber eine Reihe von Argumenten.
• bind: Gibt eine neue Funktion mit einem angegebenen diesem-Wert zurück.

Zum Beispiel:

    function test() {
        console.log(this);
    }
    test(); // Outputs: Window

In diesem Fall bezieht sich „this“ in printName auf student2 statt auf student1.

---

Pfeilfunktionen und „dies“

Pfeilfunktionen verhalten sich anders als herkömmliche Funktionen. Sie haben keinen eigenen „diesen“ Kontext; Stattdessen erben sie „dies“ aus ihrem umschließenden lexikalischen Kontext. Das bedeutet, dass „dies“ innerhalb einer Pfeilfunktion auf denselben Wert verweist wie außerhalb der Funktion:

    'use strict';
    function test() {
        console.log(this);
    }
    test(); // Outputs: undefined

Hier bezieht sich „this“ in der Pfeilfunktion auf das „obj“-Objekt und zeigt, wie Pfeilfunktionen den „this“-Wert aus ihrem umschließenden Kontext erfassen.

---

„this“ im DOM

Schließlich kann sich „this“ bei der Arbeit mit dem DOM auf das HTML-Element beziehen, das ein Ereignis ausgelöst hat. Zum Beispiel:

    const obj = {
        name: 'My Object',
        getName: function() {
            console.log(this.name);
        }
    };
    obj.getName(); // Outputs: My Object

In diesem Fall bezieht sich „this“ beim Klicken auf die Schaltfläche auf das Schaltflächenelement selbst.

---

Vielen Dank fürs Lesen. Wenn Sie diesen Leitfaden hilfreich fanden, teilen Sie ihn bitte mit anderen Entwicklern und üben Sie weiter, um Ihr Verständnis von „diesem“ in JavaScript zu festigen!

Das obige ist der detaillierte Inhalt vonWas zum Teufel ist das Schlüsselwort „dieses' in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!