Flash cards
Review the key moves
What is the main idea behind JavaScript Function bind()?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___ newFunction = functionName.bind( this , arg1, arg2, ...);Put the learning moves in the order that makes the concept easiest to apply.
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.
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();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()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 personThe 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);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.
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.
Related this Topics
The this Keyword
The call() Method
The apply() Method
The bind() Method
JavaScript Self Invocing Functions