Function Borrowing

With the bind() method, an object can borrow a method from another object.

The example below creates two objects, teacher and student. The student object borrows the getFullName method from the teacher object:

Example:

const teacher = { firstName: "Alice", lastName: "Johnson", getFullName: function () { return this.firstName + " " + this.lastName; } }; const student = { firstName: "Bob", lastName: "Smith", }; let fullName = teacher.getFullName.bind(student);

Preserving this

Sometimes the bind() method has to be used to prevent losing the context of this.

In the following example, the user object has a showName method. Within the showName method, this refers to the user object:

Example:

const user = { firstName: "Charlie", lastName: "Brown", showName: function () { let element = document.getElementById("output"); element.innerHTML = this.firstName + " " + this.lastName; } }; user.showName();

When a function is used as a callback, the context of this is lost. This example will try to display the user's name after 3 seconds, but it will display undefined instead:

Example:

const user = { firstName: "Charlie", lastName: "Brown", showName: function () { let element = document.getElementById("output"); element.innerHTML = this.firstName + " " + this.lastName; } }; setTimeout(user.showName, 3000);

The bind() method solves this problem. In the following example, the bind() method is used to bind user.showName to user. This example will display the user's name after 3 seconds:

Example:

const user = { firstName: "Charlie", lastName: "Brown", showName: function () { let element = document.getElementById("output"); element.innerHTML = this.firstName + " " + this.lastName; } }; let showName = user.showName.bind(user); setTimeout(showName, 3000);