Vereinfachtes Aufrufen, Anwenden und Binden in JavaScript

Mit JavaScript können Sie den Kontext (diesen Wert) von Funktionen mithilfe von Aufruf, Anwenden und Binden ändern. Diese Methoden mögen auf den ersten Blick schwierig erscheinen, aber mit ein paar einfachen Beispielen und Analogien aus dem wirklichen Leben werden Sie den Dreh raus. Lassen Sie uns sie aufschlüsseln.

Die Aufrufmethode

Stellen Sie sich einen Aufruf als eine Möglichkeit vor, eine Methode von einem Objekt auszuleihen und sie mit einem anderen Objekt zu verwenden.

Analogie aus dem wirklichen Leben

Stellen Sie sich vor, Sie haben eine Smartphone-App, die Ihren Zeitplan überprüft. Ihr Freund hat ebenfalls die gleiche App, hat aber keinen Zeitplan eingerichtet. Sie können Ihrem Freund Ihre App-Konfiguration vorübergehend leihen, damit er sehen kann, wie sie mit seinem Zeitplan zusammenarbeitet.

Beispiel

const person1 = {
  firstName: 'John',
  lastName: 'Doe',
  fullName: function() {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

const person2 = {
  firstName: 'Jane',
  lastName: 'Smith'
};

person1.fullName.call(person2); // Outputs: Jane Smith

Hier verfügt Person1 über eine Methode, um ihren vollständigen Namen auszudrucken. Mit call kann Person2 diese Methode ausleihen und ihren eigenen vollständigen Namen ausgeben.

Die apply-Methode

Apply ähnelt Aufruf, akzeptiert jedoch Argumente als Array.

Analogie aus dem wirklichen Leben

Stellen Sie sich vor, Sie sind in einem Restaurant und bestellen Essen. Anstatt dem Kellner jeden Artikel einzeln mitzuteilen, übergeben Sie dem Kellner eine Liste mit Artikeln.

Beispiel

function sum(a, b) {
  console.log(a + b);
}

sum.apply(null, [5, 10]); // Outputs: 15

In diesem Beispiel ruft apply die Summenfunktion mit den Argumenten 5 und 10 auf, die als Array bereitgestellt werden.

Die bind-Methode

bind erstellt eine neue Funktion, deren Wert beim Aufruf auf den angegebenen Wert gesetzt wird. Es ist, als würden Sie Ihre App-Konfiguration dauerhaft an Ihren Freund leihen, damit dieser sie verwenden kann, wann immer er möchte.

Analogie aus dem wirklichen Leben

Angenommen, Sie haben eine spezielle TV-Fernbedienung, die nur mit Ihrem Fernseher funktioniert. Sie können eine Duplikat-Fernbedienung erstellen, die dauerhaft mit dem Fernseher Ihres Freundes funktioniert.

Beispiel

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const retrieveX = module.getX;
console.log(retrieveX()); // Outputs: undefined (because 'this' is not module)

const boundGetX = retrieveX.bind(module);
console.log(boundGetX()); // Outputs: 42

In diesem Beispiel erstellt bind eine neue Funktion „boundGetX“, die immer „module“ als diesen Wert verwendet.

Praktische Anwendungsfälle

1. Kreditaufnahmemethoden

Mit call können Sie Methoden von anderen Objekten ausleihen.

const person = {
  name: 'Alice',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

const anotherPerson = {
  name: 'Bob'
};

person.greet.call(anotherPerson); // Outputs: Hello, Bob

2. Anwendung für mathematische Funktionen verwenden

Apply ist nützlich, um Arrays an Funktionen wie Math.max zu übergeben.

const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers); 
console.log(max); // Outputs: 7

3. Funktionsargumente voreinstellen

bind kann verwendet werden, um Funktionen mit voreingestellten Argumenten zu erstellen.

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);
console.log(double(5)); // Outputs: 10

Hier erstellt bind eine neue Funktion double, wobei a immer 2 ist, wodurch es einfach ist, jede Zahl zu verdoppeln.

Abschluss

Wenn Sie Call, Apply und Bind verstehen, können Sie steuern, wie Funktionen in JavaScript ausgeführt werden. Sie ermöglichen Ihnen, diesen Wert und voreingestellte Argumente zu ändern, wodurch Ihr Code flexibler und wiederverwendbar wird. Wenn Sie diese Methoden beherrschen, können Sie saubereren und effizienteren JavaScript-Code schreiben.

Das obige ist der detaillierte Inhalt vonVereinfachtes Aufrufen, Anwenden und Binden in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!