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:
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>
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:
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:
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:
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>
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.
detta
är inte en variabel. Det är ett nyckelord. Du kan inte ändra värdet på denna
.
JavaScript-handledningen för denna