JavaScript Function bind()
Method Borrowing
Like with call() and apply(), the bind() an object 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 choosed.
Note
bind() is an advanced topic.
Make sure you understand this, call(), and apply() first.
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();
Try it Yourself »
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()
Try it Yourself »
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();
Try it Yourself »
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
This will diplay 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);
Try it Yourself »
The bind() method solves this problem.
In the following example, the bind() method is used to bind person.display to person.
Example
This will display correct:
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);
Try it Yourself »
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);
Try it Yourself »
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.
