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:
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>
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:
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:
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:
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>
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.
tämä
ei ole muuttuja. Se on avainsana. Et voi muuttaa tämän
arvoa.
JavaScript tämä opetusohjelma