JavaScript-funktio bind() -menetelmä


Sisällysluettelo

    Näytä sisällysluettelo


Lainaustoiminto

bind()-menetelmällä objekti voi lainata menetelmän toiselta objektilta.

Alla oleva esimerkki luo 2 objektia (henkilö ja jäsen).

Jäsenobjekti lainaa fullname-metodin henkilöobjektista:

Esimerkki

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

Kokeile itse →

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

Säilytetään tätä

Joskus on käytettävä bind()-menetelmää estämään tämän menettäminen.

Seuraavassa esimerkissä henkilöobjektilla on näyttömenetelmä. Näyttötavassa tämä viittaa henkilöobjektiin:

Esimerkki

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

person.display();

Kokeile itse →

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

Kun toimintoa käytetään takaisinsoittona, tämä menetetään.

Tämä esimerkki yrittää näyttää henkilön nimen kolmen sekunnin kuluttua, mutta sen sijaan näkyy undefined:

Esimerkki

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

setTimeout(person.display, 3000);

Kokeile itse →

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

Metodi bind() ratkaisee tämän ongelman.

Seuraavassa esimerkissä bind()-menetelmää käytetään sidomaan person.display henkilöön.

Tämä esimerkki näyttää henkilön nimen 3 sekunnin kuluttua:

Esimerkki

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

Kokeile itse →

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


Mikä tämä on?

JavaScriptissä tämä-avainsana viittaa objektiin.

Mikä objekti riippuu siitä, miten tätä kutsutaan (käytetään tai kutsutaan).

Avainsana tämä viittaa erilaisiin objekteihin sen käyttötavan mukaan:

  • Objektimenetelmässä tämä viittaa objektiin.

  • Yksin tämä viittaa globaaliin objektiin.

  • Funktiossa tämä viittaa globaaliin objektiin.

  • Funktion tiukassa tilassa tämä on määrittämätön.

  • Tapahtumassa tämä viittaa elementtiin, joka vastaanotti tapahtuman.

  • Menetelmät, kuten call(), apply() ja bind() voi viitata tähän mihin tahansa objektiin.

Huomautus

tämä ei ole muuttuja. Se on avainsana. Et voi muuttaa tämän arvoa.

Katso myös:

JavaScript tämä opetusohjelma