Das Schlüsselwort „this' in JavaScript verstehen: Eine vollständige Anleitung

Das Schlüsselwort this in JavaScript ist einer der mächtigsten, aber oft missverstandenen Aspekte der Sprache. Ihr Wert wird dadurch bestimmt, wie eine Funktion aufgerufen wird, und nicht, wo sie definiert ist, was sie für die Verwaltung des Kontexts in Ihrem Code von entscheidender Bedeutung macht.

In diesem Leitfaden werden wir die Nuancen davon anhand praktischer Beispiele untersuchen und uns damit befassen, wie man es mithilfe von Aufruf, Anwenden und Binden explizit steuern kann.

Die Grundlagen dazu

In JavaScript bezieht sich dies auf das Objekt, das gerade den Code ausführt. Die Regeln zur Bestimmung ihres Werts hängen vom Aufruftyp der Funktion ab:

1. Implizite Bindung: Dies ist das Objekt vor dem Methodenaufruf.
2. Explizite Bindung: Dies kann explizit mit call, apply oder bind festgelegt werden.
3. Neue Bindung: In Konstruktorfunktionen bezieht sich dies auf das neu erstellte Objekt.
4. Globale/Fensterbindung: Wenn keine der oben genannten Regeln zutrifft, wird standardmäßig das globale Objekt verwendet (Fenster in Browsern oder global in Node.js).

1. Implizite Bindung: Kontext vom Aufrufer

Wenn eine Funktion als Methode eines Objekts aufgerufen wird, bezieht sich dies auf das Objekt vor dem Punkt.

const car = {
  model: "Tesla",
  displayModel: function () {
    console.log(this.model);
  }
};

car.displayModel(); // Output: "Tesla"

In diesem Beispiel verweist this.model auf die Modelleigenschaft des Autoobjekts, da „Auto“ der Aufrufer ist.

2. Explizite Bindung: Verwenden von Aufruf, Anwenden und Binden

Wenn Sie eine genaue Kontrolle über den Wert benötigen, können Sie „Call“, „Apply“ oder „Bind“ verwenden.

A. Anruf

Die Aufrufmethode ruft sofort eine Funktion mit einem angegebenen Wert und einzelnen Argumenten auf.

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: "Jack" };

greet.call(person, "Hello", "!"); // Output: "Hello, Jack!"

Hier stellt der Aufruf sicher, dass „this.name“ auf die Namenseigenschaft des Personenobjekts verweist.

B. anwenden

Die Methode „apply“ ähnelt der Methode „call“, akzeptiert die Argumente jedoch als Array und nicht einzeln.

greet.apply(person, ["Hi", "."]); // Output: "Hi, Jack."

Dies macht „Apply“ besonders nützlich, wenn Sie eine Reihe von Argumenten übergeben müssen.

C. binden

Die Bindungsmethode gibt eine neue Funktion zurück, wobei diese dauerhaft auf ein angegebenes Objekt festgelegt ist, was einen verzögerten Aufruf ermöglicht.

const boundGreet = greet.bind(person, "Welcome");
boundGreet("?"); // Output: "Welcome, Jack?"

Mit bind erstellen Sie eine wiederverwendbare Funktion, die an einen bestimmten Kontext gebunden ist.

3. Neue Bindung: Objekte mit Konstruktorfunktionen erstellen

Wenn eine Funktion mit dem Schlüsselwort new aufgerufen wird, bezieht sich dies auf das neue Objekt, das erstellt wird.

function Person(name) {
  this.name = name;
}

const jack = new Person("Jack");
console.log(jack.name); // Output: "Jack"

Der neue Operator legt dies auf das neu erstellte Objekt fest, sodass Sie wiederverwendbare Objektentwürfe definieren können.

4. Globale/Fensterbindung: Der Fallback

Wenn keine der oben genannten Regeln zutrifft, wird standardmäßig das globale Objekt verwendet. Im strikten Modus („use strict“) ist dies in solchen Fällen jedoch undefiniert.

const car = {
  model: "Tesla",
  displayModel: function () {
    console.log(this.model);
  }
};

car.displayModel(); // Output: "Tesla"

Seien Sie bei der globalen Bindung vorsichtig, da dies zu unbeabsichtigtem Verhalten führen kann.

Zusammenfassung von Aufruf, Anwenden und Binden

Hier ein kurzer Vergleich:

Abschluss

Die Beherrschung des Schlüsselworts this ist für das Schreiben sauberen, kontextbewussten JavaScript-Codes unerlässlich. Wenn Sie die implizite, explizite, neue und globale Bindung verstehen, können Sie dies in verschiedenen Szenarios sicher verwalten. Tools wie „Aufrufen“, „Anwenden“ und „Binden“ bieten eine detaillierte Kontrolle und machen Ihre Funktionen flexibel und wiederverwendbar.

Folgen Sie mir auf: Github Linkedin

Das obige ist der detaillierte Inhalt vonDas Schlüsselwort „this' in JavaScript verstehen: Eine vollständige Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!