JavaScript Function bind()

Funktionsoverlieferung (Function Borrowing)

Durch die Verwendung der Methode bind() kann ein Objekt eine Methode von einem anderen Objekt leihen.

Im folgenden Beispiel werden 2 Objekte (person und member) erstellt.

Das Objekt member nutzt die Methode fullname des Objekts person:

Beispiel

const person = {
  firstName: "Bill",
  lastName: "Gates",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}
const member = {
  firstName: "Hege",
  lastName: "Nilsen",
}
let fullName = person.fullName.bind(member);

Probieren Sie es selbst aus

this beibehalten wird

muss manchmal die Methode bind() verwendet werden, um zu verhindern, dass this.

Im folgenden Beispiel hat das Objekt person eine Methode display. In der Methode display,this bezieht sich auf das Objekt person:

Beispiel

const person = {
  firstName: "Bill",
  lastName: "Gates",
  display: function () {
    let x = document.getElementById("demo");
    x.innerHTML = this.firstName + " " + this.lastName;
  }
}
person.display();

Probieren Sie es selbst aus

Wenn eine Funktion als Callback verwendet wird,this verloren gehen.

Dieser Beispielversuch wird versuchen, den Namen des Menschen nach 3 Sekunden anzuzeigen, aber er wird undefined:

Beispiel

const person = {
  firstName: "Bill",
  lastName: "Gates",
  display: function () {
    let x = document.getElementById("demo");
    x.innerHTML = this.firstName + " " + this.lastName;
  }
}
setTimeout(person.display, 3000);

Probieren Sie es selbst aus

Die Methode bind() löst dieses Problem.

Im folgenden Beispiel wird die Methode bind() verwendet, um person.display an person zu binden.

In diesem Beispiel wird der Name des Menschen nach 3 Sekunden angezeigt:

Beispiel

const person = {
  firstName: "Bill",
  lastName: "Gates",
  display: function () {
    let x = document.getElementById("demo");
    x.innerHTML = this.firstName + " " + this.lastName;
  }
}
let display = person.display.bind(person);
setTimeout(display, 3000);

Probieren Sie es selbst aus

Was ist this?

in JavaScript,this SchlüsselwortverweisObjekt.

verweistwelcheObjekt hängt vom Aufruf (Verwendung oder Aufruf) ab.

je nach Verwendung, das Schlüsselwort this verweist auf verschiedene Objekte:

  • in den Methoden des Objekts,this verweist auf diesesObjekt.
  • wenn allein verwendet,this verweistglobalen Objekt.
  • in der Funktion,this verweistglobalen Objekt.
  • in der Funktion, im strengen Modus,this ist undefined.
  • im Ereignis,this verweist auf das Ereignis, das es empfängtElemente.
  • call(), apply() und bind() und andere Methoden können this verweist aufjeder Objekt.

Hinweis:this ist kein Variable. Es ist ein Schlüsselwort. Sie können es nicht ändern this .

Weitere Informationen:

Lehrvideo:JavaScript this