Com o método bind(), um objeto pode pegar emprestado um método de outro objeto.
O exemplo abaixo cria 2 objetos (pessoa e membro).
O objeto membro pega emprestado o método fullname do objeto person:
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);Experimente você mesmo →
<!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 vezes, o método bind() deve ser usado para evitar a perda isto.
No exemplo a seguir, o objeto person possui um método display. No método display, this refere-se ao objeto person:
const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
person.display();Experimente você mesmo →
<!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>
Quando uma função é usada como retorno de chamada, isso é perdido.
Este exemplo tentará exibir o nome da pessoa após 3 segundos, mas em vez disso exibirá indefinido:
const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
setTimeout(person.display, 3000);Experimente você mesmo →
<!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>
O método bind() resolve esse problema.
No exemplo a seguir, o método bind() é usado para vincular person.display a person.
Este exemplo exibirá o nome da pessoa após 3 segundos:
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);Experimente você mesmo →
<!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>
Em JavaScript, a palavra-chave this refere-se a um objeto.
Qual objeto depende de como este está sendo invocado (usado ou chamado).
A palavra-chave this refere-se a diferentes objetos dependendo de como é usada:
Em um método de objeto, this refere-se ao objeto.
Sozinho, isto refere-se ao objeto global.
Em uma função, this refere-se ao objeto global.
Em uma função, no modo estrito, isso é indefinido.
Em um evento, this refere-se ao elemento que recebeu o evento.
Métodos como call(), apply() e bind() pode referir isto a qualquer objeto.
isto não é uma variável. É uma palavra-chave. Você não pode alterar o valor de isto.
O tutorial de JavaScript este