JavaScript call(),apply(),bind() method and polyfill bind.

We have worked on many JavaScript functions or methods so far. Now let's discuss on some advanced methods in JavaScript such as call(),apply() and bind().

Now why exactly these three methods are used?

Well, there is a thing in JavaScript called function borrowing .

What is function borrowing ?

Whenever we can borrow or use a function with the data of another objects, it is known as function borrowing.

So , for function borrowing we use the above mentioned methods. All of them have the same functionality but there is a little difference in implementation.

Let's discuss on call() method first. We will see how we can use call() method with an example code. Let us consider , we will declare a object first called studentObj , where we are going to have values for three keys (firstname,lastname and school) and then we will declare a function which is going to be borrowed with the studentObj object with the help of call() method.

within the call method the first argument always should be the object which is the reference for the this keyword in function, here our object is studentObj, so we will pass studentObj as the first argument in call method.

Code :


let studentObj = {
  firstname: "Megha",
  lastname: "Paul",
  school: "BMS",
};
//declaring the function
let myFunc = function () {
  console.log(this.firstname + " " + this.lastname + " is from " + this.school);
};
//borrowing the function or binding the function with the object and with call method
//we can directly invoke or call the function
//within the call method the first argument always should be the object which is the
// reference to the this keyword in function, here our object is studentObj, so we will pass studentObjas the first
// argument in call method
// myFunc.call()
myFunc.call(studentObj);

Output:

Now what if we want to pass parameters with our functions ? In call() method the parameters in the function are passed separately or individually with commas as arguments just after the first argument(reference for the this keyword in function) .

Let us see the code implementation for this :


let studentObj = {
    firstname : "Megha" ,
    lastname : "Paul",
    school : "BMS"
}
//declaring the function
let myFunc = function(city,state){
    console.log(this.firstname + " " + this.lastname + " is from " + this.school + " she stays at " + city + " which is in " + state)

}
//borrowing the function or binding the function with the object and with call method
//we can directly invoke or call the function
//within the call method the first argument always should be the object which is the
// reference to the this keyword in function, here our object is studentObj, so we will pass studentObjas the first 
// argument in call method
// myFunc.call()
//In call() method the parameters in the function are passed separately with commas as arguments just after the first argument(reference for the this keyword in function) .
myFunc.call(studentObj,"Kolkata","West Bengal")

Output:

Now after call() method we are going to discuss on apply() method. Well both of the methods are same , just there is a difference in syntax while implementation. In case of apply() method the arguments within the apply methods just after the object reference are passed inside a array list as a second argument.

Let's check out the code :


let studentObj = {
  firstname: "Megha",
  lastname: "Paul",
  school: "BMS",
};
//declaring the function
let myFunc = function (city, state) {
  console.log(
    this.firstname +
      " " +
      this.lastname +
      " is from " +
      this.school +
      " she stays at " +
      city +
      " which is in " +
      state
  );
};
//borrowing the function or binding the function with the object and with apply method
//we can directly invoke or call the function
//within the apply method the first argument always should be the object which is the
// reference to the this keyword in function, here our object is studentObj, so we will pass studentObjas the first
// argument in apply method
// myFunc.apply()
// In case of apply() method the arguments within the apply methods just after the objects reference are passed inside a array list as a second argument.
myFunc.apply(studentObj, ["Kolkata", "West Bengal"]);

Output:

Now the last and most important method is bind() method. Though bind method's functionality is quite similar to call() method , but the main difference is using the call() method , we directly invoke the function but bind() method first binds the function or the method and then returns a copy of the method which can be invoked or called later anytime. Let us see the code implementation :


let studentObj = {
  firstname: "Megha",
  lastname: "Paul",
  school: "BMS",
};
//declaring the function
let myFunc = function (city, state) {
  console.log(
    this.firstname +
      " " +
      this.lastname +
      " is from " +
      this.school +
      " she stays at " +
      city +
      " which is in " +
      state
  );
};
// we directly invoke the function but bind() method first binds the function or the method and then returns a copy of the method which can invoke or call later anytime.
//within the bind method the first argument always should be the object which is the
// reference to the this keyword in function, here our object is studentObj, so we will pass studentObjas the first
//as we can see after binding the bind method with the function we are returning a copy of the method in copyFunc()

const copyFunc = myFunc.bind(studentObj, "Kolkata", "West Bengal");
//we can invoke or call copyFunc anytime
copyFunc();

Output:

Now let us discuss on polyfill bind() method. Well it may often happen due to fallback or drawbacks of some browsers the bind() method is not supported in them, so for that reason as a developer , we need to know how we can implement our own bind() method .

Custom code implementation for bind() method ,here mybind() is the custom bind() method:


let studentObj = {
  firstname: "Megha",
  lastname: "Paul",
  school: "BMS",
};
//declaring the function
let myFunc = function (city, state) {
  console.log(
    this.firstname +
      " " +
      this.lastname +
      " is from " +
      this.school +
      " she stays at " +
      city +
      " which is in " +
      state
  );
};
// we directly invoke the function but bind() method first binds the function or the method and then returns a copy of the method which can invoke or call later anytime.
//within the bind method the first argument always should be the object which is the
// reference to the this keyword in function, here our object is studentObj, so we will pass studentObjas the first
//as we can see after binding the bind method with the function we are returning a copy of the method in copyFunc()

// const copyFunc = myFunc.bind(studentObj, "Kolkata", "West Bengal");
//we can invoke or call copyFunc anytime
// copyFunc();

// polyfill bind -> for some browsers there's a drawback that they doesn't have the default
// bind() methodso we need to know how to implement the bind method by ourselves
// polyfill bind
// Function.prototype->so that any fuction can access this method
Function.prototype.mybind = function (...args1) {
  obj = this;
  params = args1.slice(1);
  return function (...args2) {
    obj.apply(args1[0], [...params, ...args2]);
  };
};
let newfunc2 = myFunc.mybind(studentObj, "Kolkata", "West Bengal");
//we can invoke or call myfunc2 anytime
newfunc2();

Output:

So I hope this was helpful and you have got a good idea on these three methods.

JavaScript call(),apply(),bind() method and polyfill bind.

Product

Explore

Company

Blogs

Support