Method Borrowing
Like with call() and apply(), the bind() method can borrow a method from another object.
Unlike call() 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.
Note: bind() is an advanced topic. Make sure you understand this, call(), and apply() first. The this Keyword The call() Method The apply() Method
Basic bind() Syntax
The bind() 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, ...);
Using bind() to Fix this
The most common use of bind() is to make sure a function always uses the same this value.
Example
const person1 = { name: "John" };
const person2 = { name: "Paul" };
const person3 = { name: "Ringo" };
function greet() {
return "Hello " + this.name;
}
const greetJohn = greet.bind(person1);
greetJohn();
Note: 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:
Example
// 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()
Note: 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
Comparison
// 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.
Example
const person = {
name: "John",
sayHello: function() {
return "Hello " + this.name;
}
};
const hello = person.sayHello;
hello(); // this is not person
The function above loses its this value.
Example with bind()
const hello = person.sayHello.bind(person);
hello();
Using bind() for Preserving this
The bind() 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:
Example
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.
Example
const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
setTimeout(person.display, 3000);
The bind() method solves this problem.
In the following example, the bind() method is used to bind person.display to person.
Example
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);
bind() with Arguments
Arguments passed to bind() become fixed values.
This is sometimes called partial application.
Example
function multiply(a, b) {
return a * b;
}
const double = multiply.bind(null, 2);
double(5);
Note: The double function will always multiply by 2.
bind() Does Not Change the Original Function
The original function is not modified.
Each call to bind() creates a new function.
Examples
const greetJohn = greet.bind({ name: "John" });
const greetAnna = greet.bind({ name: "Anna" });
Common Mistakes
- Expecting bind() to Call the Function bind() does not execute the function.
- Forgetting to Call the Returned Function You must call the new function yourself.
- Overusing bind() Sometimes a normal function call is simpler.
Note: Related this Topics The this Keyword The call() Method The apply() Method The bind() Method
Next Chapter
JavaScript Self Invocing Functions
