&#this&# keyword, call(), apply() and bind() methods in JavaScript - simply explained

Das Erlernen der Methoden call(), apply() und bind() ist wichtig, da Sie damit den Kontext davon in JavaScript steuern können. In Situationen, in denen dieses Verhalten standardmäßig nicht wie erwartet funktioniert, beispielsweise beim Ausleihen von Methoden von einem Objekt auf ein anderes oder beim Beibehalten des richtigen Kontexts innerhalb von Rückrufen, bieten diese Methoden Flexibilität und Kontrolle. Wenn Sie sie beherrschen, können Sie effizientere, wiederverwendbare und kontextbewusste Funktionen schreiben, was besonders in komplexen Anwendungen nützlich ist.

Bevor wir uns mit den Methoden call(), apply() und bind() befassen, wollen wir uns mit dem Schlüsselwort „this“ und seinem Mechanismus befassen.

„dieses“ Schlüsselwort

Lassen Sie uns anhand der folgenden Aufzählungspunkte verstehen, wann und worauf sich dieses Schlüsselwort bezieht:

• In einer Objektmethode bezieht sich dies auf das Objekt. Innerhalb einer in einem Objekt definierten Methode verweist dies auf das Objekt, das Eigentümer der Methode ist.

• In einer regulären Funktion bezieht sich dies auf das globale Objekt. Wenn im nicht-strikten Modus eine Funktion im globalen Kontext (nicht als Methode eines Objekts) aufgerufen wird, bezieht sich dies auf das globale Objekt (Fenster in Browsern).

• In einer Funktion im strengen Modus ist dies undefiniert. Wenn die Funktion keine Methode eines Objekts ist und nicht an einen bestimmten Kontext gebunden ist (über Aufruf, Anwenden oder Binden), ist dies im strikten Modus undefiniert.

• In Event-Handlern bezieht sich dies auf das Element, das das Ereignis empfangen hat. Wenn ein Ereignis ausgelöst wird, bezieht sich dies auf das HTML-Element, das das Ereignis aufgerufen hat.
  

  <button onclick="this.style.display='none'">
    Click to Remove Me!
  </button>
  

  In diesem Fall bezieht sich dies auf das Schaltflächenelement selbst, das das Onclick-Ereignis empfangen hat.

Bei Pfeilfunktionen verhält sich dies anders. Pfeilfunktionen haben keinen eigenen Kontext. Stattdessen wird dies zum Zeitpunkt der Erstellung der Pfeilfunktion lexikalisch vom umgebenden Bereich geerbt. Dies bedeutet, dass sich dies innerhalb einer Pfeilfunktion auf den Wert dieser umschließenden Funktion oder des Kontexts bezieht.

const person = {
  name: "Alice",
  greet: function() {
    setTimeout(() => {
      console.log(`Hi, I'm ${this.name}`);
    }, 1000);
  }
};

person.greet(); // Output: Hi, I'm Alice

In diesem Fall erbt die Pfeilfunktion in setTimeout dies von der Greet-Methode, die auf das Personenobjekt zeigt.

call()-Methode

Mit der call()-Methode können Sie eine Funktion oder Methode von einem Objekt „ausleihen“ und sie mit einem anderen Objekt verwenden, indem Sie das andere Objekt als erstes Argument übergeben. Das erste Argument wird zum this-Wert innerhalb der Funktion, und weitere Argumente folgen danach.

Die call()-Methode erstellt keine neue Funktion; Es führt die vorhandene Funktion mit dem bereitgestellten Kontext und den bereitgestellten Argumenten aus.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " is going to " + city + ", " + country + ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

person.fullName.call(person1, "Oslo", "Norway");
// Output: John Doe is going to Oslo, Norway.

In diesem Beispiel wird call() verwendet, um die fullName-Methode von person mit den Daten von person1 (Vorname und Nachname) auszuführen, und die zusätzlichen Argumente sind „Oslo“ und „Norwegen“.

apply()-Methode

Die apply()-Methode ist der call()-Methode sehr ähnlich. Der Hauptunterschied liegt darin, wie Argumente an die Funktion übergeben werden. Mit apply() übergeben Sie die Argumente als Array (oder als arrayähnliches Objekt) und nicht einzeln.

Wie call() erstellt die apply()-Methode keine neue Funktion. Es führt die Funktion sofort mit dem bereitgestellten Kontext (diesem Wert) und den Argumenten aus.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " is going to " + city + ", " + country + ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

person.fullName.apply(person1, ["Oslo", "Norway"]);
// Output: John Doe is going to Oslo, Norway.

In diesem Beispiel wird apply() verwendet, um die fullName-Methode des Personenobjekts aufzurufen, jedoch mit dem Kontext (this) von person1. Die Argumente „Oslo“ und „Norwegen“ werden als Array übergeben.

bind()-Methode

Mit der bind()-Methode in JavaScript können Sie den Kontext (diesen Wert) für eine Funktion oder Methode festlegen, genau wie call() und apply(). Im Gegensatz zu call() und apply() ruft die Methode bind() die Funktion jedoch nicht sofort auf. Stattdessen wird eine neue Funktion zurückgegeben, bei der dieser Wert auf das von Ihnen angegebene Objekt festgelegt ist.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " is going to " + city + ", " + country + ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

const func = person.fullName.bind(person1);
func("Oslo", "Norway");
// Output: John Doe is going to Oslo, Norway.

In diesem Beispiel erstellt bind() eine neue Funktion func, wobei dieser Wert auf person1 gesetzt ist. Die Funktion wird nicht sofort aufgerufen, aber Sie können sie später aufrufen, indem Sie die Argumente „Oslo“ und „Norwegen“ übergeben.

Beispiel: Zentralisierter Logger mit mehreren Kontexten

Hier ist ein kleines, aber komplexes Anwendungsbeispiel, bei dem die Verwendung von call(), apply() oder bind() Effizienz bringt – insbesondere bei der Handhabung teilweiser Anwendung von Funktionen für Protokollierungszwecke:

Angenommen, Sie verfügen über eine zentrale Protokollierungsfunktion, die Informationen über verschiedene Benutzer protokolliert, die Aktionen ausführen. Mit bind() können Sie diesen Kontext effizient auf verschiedene Benutzer festlegen und so sich wiederholenden Code vermeiden.

const logger = {
  logAction: function(action) {
    console.log(`${this.name} (ID: ${this.id}) performed: ${action}`);
  }
};

const user1 = { name: "Alice", id: 101 };
const user2 = { name: "Bob", id: 202 };

// Create new logger functions for different users
const logForUser1 = logger.logAction.bind(user1);
const logForUser2 = logger.logAction.bind(user2);

// Perform actions without manually passing user context
logForUser1("login");
// Output: Alice (ID: 101) performed: login

logForUser2("purchase");
// Output: Bob (ID: 202) performed: purchase

Warum es effizient ist:

Kontextwiederverwendung: Sie müssen den Benutzerkontext nicht jedes Mal manuell übergeben, wenn Sie eine Aktion protokollieren. Der Kontext (dies) wird einmal gebunden und die Protokollierung wird wiederverwendbar und sauber.

Modularity: If you need to add more users or actions, you can quickly bind them to the logger without altering the function itself, keeping your code DRY (Don’t Repeat Yourself).

The above is the detailed content of &#this&# keyword, call(), apply() and bind() methods in JavaScript - simply explained. For more information, please follow other related articles on the PHP Chinese website!