Loading lesson path
and apply(), the bind() method can borrow a method from another object.
and apply(), the bind() method does not run the function immediately. Instead, it returns a new function that can be called later. The new function remembers the this value you chose. bind() is an advanced topic. Make sure you understand this, call(), and apply() first.
method creates a new function. The first argument sets the this value for the new function. Additional arguments become fixed arguments for the new function.
Syntax const newFunction = functionName.bind(
this, arg1, arg2, ...);is to make sure a function always uses the same this value.
const person1 = { name: "John" };
const person2 = { name: "Paul" };
const person3 = { name: "Ringo" };
function greet() {
return "Hello " + this.name;
}
const greetJohn = greet.bind(person1);
greetJohn();greetJohn is a new function that always uses person1 as this. The example below creates 2 objects (person and member). The member object borrows the fullname method from the person object:
// Create person Object const person = {
firstName:"John", lastName: "Doe", fullName: function () {
return this.firstName + " " + this.lastName;
}
}
// Create member Object const member = {
firstName:"Hege", lastName: "Nilsen",
}
// Bind the fullName method to the member Object let fullName = person.fullName.bind(member);
// Later call fullname()
fullname()fullName is a new function that always uses member as this. bind() vs call() and apply() The difference between these methods is important: call() calls a function immediately apply() calls a function immediately bind() returns a new function
// Call a function greet.call(person);
// Call a function greet.apply(person);
// Create a new function const greetLater = greet.bind(person);
// Call the new function greetLater();
bind() for Functions Called Later
Without bind(), the this value may be lost.const person = {
name: "John", sayHello: function() {
return "Hello " + this.name;
}
};
const hello = person.sayHello;
hello(); // this is not personThe function above loses its this value.
const hello = person.sayHello.bind(person);
hello();method can be used to prevent losing this. In the following example, the person object has a display method. In the display method, this refers to the person object
const person = {
firstName:"John", lastName: "Doe", display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
person.display();When a function is used as a callback, this is lost. The example below uses person.display as a callback in the setTimeout() method.
This will display undefined instead of person name:
const person = {
firstName:"John", lastName: "Doe", display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
setTimeout(person.display, 3000);method solves this problem. In the following example, the bind() method is used to bind person.display to person.