JavaScript-Funktion bind()-Methode

Inhaltsverzeichnis

Funktionsausleihe

Mit der Methode bind() kann ein Objekt eine Methode von einem anderen Objekt ausleihen.

Das folgende Beispiel erstellt zwei Objekte (Person und Mitglied).

Das Member-Objekt leiht sich die Fullname-Methode vom Person-Objekt:

Beispiel

const person = {
  firstName:"John",
  lastName: "Doe",
    fullName: function () {
    return this.firstName + " " + this.lastName;
    }
}

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Function bind()</h1>

<p>This example creates 2 objects (person and member).</p>
<p>The member object borrows the fullname method from person:</p> 

<p id="demo"></p>

<script>
const person = {
  firstName:"John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

document.getElementById("demo").innerHTML = fullName();
</script>

</body>
</html>

Dies bewahren

Manchmal muss die Methode bind() verwendet werden, um zu verhindern, dass dies verloren geht.

Im folgenden Beispiel verfügt das Personenobjekt über eine Anzeigemethode. In der Anzeigemethode bezieht sich dies auf das Personenobjekt:

Beispiel

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

person.display();

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Function bind()</h1>

<p>In this example, the person object has a display method:</p>

<p id="demo"></p>

<script>
const person = {
  firstName:"John",
  lastName: "Doe",
  display: function() {
    let x = document.getElementById("demo");
    x.innerHTML = this.firstName + " " + this.lastName;
  }
}

person.display();
</script>

</body>
</html>

Wenn eine Funktion als Callback verwendet wird, geht dies verloren.

In diesem Beispiel wird versucht, den Namen der Person nach 3 Sekunden anzuzeigen, stattdessen wird jedoch undefiniert angezeigt:

Beispiel

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

setTimeout(person.display, 3000);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Function bind()</h1>

<p>This example will try to display a person name after 3 seconds.</p>

<p id="demo"></p>

<script>
const person = {
  firstName:"John",
  lastName: "Doe",
  display: function() {
    let x = document.getElementById("demo");
    x.innerHTML = this.firstName + " " + this.lastName;
  }
}

setTimeout(person.display, 3000);
</script>

</body>
</html>

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 Personenname nach 3 Sekunden angezeigt:

Beispiel

const person = {
  firstName:"John",
  lastName: "Doe",
    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 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Function bind()</h1>

<p>This example will display a person name after 3 seconds:</p>

<p id="demo"></p>

<script>
const person = {
  firstName:"John",
  lastName: "Doe",
  display: function() {
    let x = document.getElementById("demo");
    x.innerHTML = this.firstName + " " + this.lastName;
  }
}

let display = person.display.bind(person);
setTimeout(display, 3000);
</script>

</body>
</html>

Was ist das?

In JavaScript bezieht sich das Schlüsselwort this auf ein Objekt.

Welches Objekt hängt davon ab, wie dies aufgerufen (verwendet oder aufgerufen) wird?

Das Schlüsselwort this bezieht sich je nach Verwendung auf unterschiedliche Objekte:

In einer Objektmethode bezieht sich this auf das Objekt.
Allein dies bezieht sich auf das globale Objekt.
In einer Funktion bezieht sich this auf das globale Objekt.
In einer Funktion ist im strikten Modus dies undefiniert.
In einem Ereignis bezieht sich this auf das Element, das das Ereignis empfangen hat.
Methoden wie call(), apply() und bind() kann dies auf jedes Objekt verweisen.

Notiz

dies ist keine Variable. Es ist ein Schlüsselwort. Sie können den Wert von this nicht ändern.

Siehe auch:

Das JavaScript dieses Tutorial