Die bind()-Methode in JavaScript

Immer wenn wir eine Funktion in JavaScript aufrufen, zeigt die Referenz der Funktion immer auf das globale Objekt, d. h. das Fensterobjekt. Dies ist für normale Funktionen in Ordnung, aber wenn es um verschachtelte Funktionen oder die in einem Objekt vorhandenen Funktionen geht, führt dies zu einem Problem. Denn hier müssen Sie zum Aufrufen der inneren Funktionen den Objektnamen oder den äußeren Funktionsnamen verwenden, um die innere Funktion aufzurufen. Wenn Sie also eine Funktion verwenden möchten, die in einem Objekt oder in einer anderen Funktion vorhanden ist, können Sie dies nicht direkt tun, da sie auf einen globalen Kontext zeigt.

Um dieses Problem zu lösen, können Sie die innere Funktion binden und den neuen Kontext innerhalb der Bindefunktion übergeben oder diese Funktion außerhalb deklarieren und dann die Funktion binden und den neuen Kontext übergeben. bind() ist eine Funktion in JavaScript, mit der Sie den globalen Kontext mit einem anderen Kontext ändern können, in dem sich die Funktion befindet. Dies wird auch als Function Borrowing bezeichnet. Lassen Sie uns anhand eines Beispiels verstehen, wie die bind-Methode in der Praxis verwendet wird.

Verwenden der Methode bind() in JavaScript

Im folgenden Code haben wir zwei Objekte, amazon und tesla. Jedes dieser Objekte enthält einige Eigenschaften wie name, noOfEmployees und eine Funktion getInfo(). Hier rufen wir die Funktion getInfo() auf, die im amazon-Objekt mit Hilfe des amazon-Objektnamens und im tesla-Objekt mit dem tesla-Objektnamen vorhanden ist.

let amazon = {
  name: 'Amazon',
  noOfEmployees: 100,
  getInfo: function() {
    console.log(`The ${this.name} has ${this.noOfEmployees} employees.`);
  },
} amazon.getInfo();


let tesla = {
  name: 'Tesla',
  noOfEmployees: 150,
  getInfo: function() {
    console.log(`The ${this.name} has ${this.noOfEmployees} employees.`);
  },
} tesla.getInfo();

Ausgabe:

The Amazon has 100 employees.
The Tesla has 150 employees.

Wenn Sie das obige Programm ausführen, erhalten Sie die obige Ausgabe. Das Problem bei diesem Ansatz ist, dass die Funktion getInfo() dasselbe tut wie das Drucken einer Zeile an die Konsole. Außerdem haben wir in beiden Objekten dieselbe Funktion deklariert, die zur Codewiederholung führt.

Stattdessen können wir die Funktion getInfo() außerhalb des Objekts deklarieren und wie unten gezeigt aus den Objekten entfernen.

let amazon = {
  name: 'Amazon',
  noOfEmployees: 100,
}

let tesla = {
  name: 'Tesla',
  noOfEmployees: 150,
}

let getInfo =
    function() {
  console.log(`The ${this.name} has ${this.noOfEmployees} employees.`);
}

let amazon_Data = getInfo.bind(amazon);
let tesla_Data = getInfo.bind(tesla);

amazon_Data();
tesla_Data();

Ausgabe:

The Amazon has 100 employees.
The Tesla has 150 employees.

Binden Sie dann die Funktion getInfo() mit den beiden Objekten amazon und tesla mit der Funktion bind(). Und dann speichern Sie die Referenz in anderen verschiedenen amazon_Data und tesla_Data.

Um nun die Funktionen aufzurufen, die Sie in amazon_Data und tesla_Data gespeichert haben, müssen Sie ein () in runde Klammern setzen. Dadurch erhalten Sie die gleiche Ausgabe wie zuvor. Der einzige Unterschied hier ist der Ansatz, den wir verfolgt haben.

Sie können die Methode auch direkt aufrufen, ohne die Referenz zu speichern, indem Sie am Ende der bind-Methode ein weiteres () hinzufügen, wie unten gezeigt.

getInfo.bind(amazon)();
getInfo.bind(tesla)();

Dieses Konzept wird auch als Function Borrowing bezeichnet, da dieselbe Funktion getInfo() von zwei verschiedenen Objekten, amazon und tesla, verwendet oder geborgt wird.