Enjoy 20% off all plans by following us on social media. Check out other promotions!
Quiz Questions

Explain `Function.prototype.bind`

Edit on GitHub

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

Source: Function.prototype.bind() - JavaScript | MDN

bind() is most useful for binding the value of this in methods of classes that you want to pass into other functions. This was frequently done in React class component methods which were not defined using arrow functions.

const john = {
age: 42,
getAge: function () {
return this.age;
console.log(john.getAge()); // 42
const unboundGetAge = john.getAge;
console.log(unboundGetAge()); // undefined
const boundGetAge = john.getAge.bind(john);
console.log(boundGetAge()); // 42
const mary = { age: 21 };
const boundGetAgeMary = john.getAge.bind(mary);
console.log(boundGetAgeMary()); // 21

In the example above, when the getAge method is called without a calling object (as unboundGetAge), the value is undefined because the value of this within getAge() becomes the global object. boundGetAge() has its this bound to john, hence it is able to obtain the age of john.

We can even use getAge on another object which is not john! boundGetAgeMary returns the age of mary.


Try implementing your own Function.prototype.bind() method on Great Front End.


Edit on GitHub