Med bind() metoden kan et objekt låne en metode fra et andet objekt.
Eksemplet nedenfor opretter 2 objekter (person og medlem).
Medlemsobjektet låner fuldnavnsmetoden fra 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);Prøv det selv →
<!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>
Nogle gange skal bind()-metoden bruges for at forhindre tab af denne.
I det følgende eksempel har personobjektet en visningsmetode. I visningsmetoden refererer dette til personobjektet:
const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
person.display();Prøv det selv →
<!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 bruges som et tilbagekald, går dette tabt.
Dette eksempel vil forsøge at vise personens navn efter 3 sekunder, men det vil vise udefineret i stedet:
const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
setTimeout(person.display, 3000);Prøv det selv →
<!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 dette problem.
I det følgende eksempel bruges bind()-metoden til at binde person.display til person.
Dette eksempel viser personens navn 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);Prøv det selv →
<!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 refererer dette søgeordet til et objekt.
Hvilket objekt afhænger af, hvordan dette påkaldes (bruges eller kaldes).
dette søgeordet refererer til forskellige objekter afhængigt af hvordan det bruges:
I en objektmetode henviser dette til objektet.
Alene henviser dette til det globale objekt.
I en funktion henviser dette til det globale objekt.
I en funktion, i streng tilstand, er dette udefineret.
I en begivenhed henviser dette til det element, der modtog begivenheden.
Metoder som call(), apply() og bind() kan henvise dette til ethvert objekt.
dette er ikke en variabel. Det er et nøgleord. Du kan ikke ændre værdien af denne.
JavaScript denne selvstudium