JavaScript Funktion bind() Metod


Innehållsförteckning

    Visa innehållsförteckning


Funktion Upplåning

Med metoden bind() kan ett objekt låna en metod från ett annat objekt.

Exemplet nedan skapar 2 objekt (person och medlem).

Medlemsobjektet lånar fullnamnsmetoden från personobjektet:

Exempel

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);

Prova själv →

<!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>

Bevarar detta

Ibland måste metoden bind() användas för att förhindra att denna tappas bort.

I följande exempel har personobjektet en visningsmetod. I visningsmetoden hänvisar detta till personobjektet:

Exempel

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

person.display();

Prova själv →

<!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>

När en funktion används som återuppringning går denna förlorad.

Det här exemplet kommer att försöka visa personens namn efter 3 sekunder, men det kommer att visa odefinierat istället:

Exempel

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

setTimeout(person.display, 3000);

Prova själv →

<!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>

Metoden bind() löser detta problem.

I följande exempel används metoden bind() för att binda person.display till person.

Det här exemplet visar personens namn efter 3 sekunder:

Exempel

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);

Prova själv →

<!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>


Vad är det här?

I JavaScript hänvisar nyckelordet detta till ett objekt.

Vilket objekt beror på hur detta anropas (används eller anropas).

Nyckelordet detta hänvisar till olika objekt beroende på hur det används:

  • I en objektmetod hänvisar detta till objektet.

  • Enbart hänvisar detta till det globala objektet.

  • I en funktion hänvisar detta till det globala objektet.

  • I en funktion, i strikt läge, är detta odefinierat.

  • I en händelse hänvisar detta till elementet som tog emot händelsen.

  • Metoder som call(), apply() och bind() kan hänvisa detta till alla objekt.

Notera

detta är inte en variabel. Det är ett nyckelord. Du kan inte ändra värdet på denna.

Se även:

JavaScript-handledningen för denna