Custom implementation of bind method in Javascript

Sheeraz Shaikh
May 27 · 3 min read

How to write polyfill for bind

Photo by Caspar Camille Rubin on Unsplash

Polyfill is essentially back support of methods that our old browser doesn’t have. I will explain how to write a custom implementation of bind which will be supported everywhere. Here is the use-case of the original bind method:

Usecase for bind method

In the code snippet, the bind method is basically a prototype method that is available to all functions. The first argument of bind is the reference to an object which can be accessed in the calling function through this keyword. Once we pass info as the first argument of bind, then properties of infowould be accessed as this keyword inside printInfo function.

Steps to create our own implementations of mybind.

Step 1: We will create a prototype function inside Function prototypes. The reason for creating it as a prototype function is because it needs to be accessed in every function like bindmethod.

Step 1

You will notice line 2 is returning another function. Since in the original bind method, it's returning a function.

Step 2: It needs to return a reference to a calling function. This means function that is calling mybind needs to be returned and its first argument should be the reference to an object.

Step 2

In this code snippet, you will notice mybind method is accepting a reference to an object refObject which is being passed as the first argument to the calling function. Also, we need to have a reference of the calling function which is set in line 2, for that we are setting reference of this to a variable fn

Step 3: We are nearly there with our completion since the basic skeleton is done. In the next step, we will have to accommodate the arguments which are passed to a function (like city). This can be achieved through the following code snippet.

Step 3

In the calling function, we are passing the rest of the arguments which are being passed in the mybind function. We are almost done with the implementation.

Hold on, we still need to accommodate another set of arguments that are being passed to the reference function(i-e country). In the first code snippet, you will notice we are calling callMethod('Malaysia') .

Step 4 (last one): Another set of arguments could be passed to the reference function.

In this code snippet, we have included args2 in line 3 so that we can pass it to the calling function. Also, in line 4, we have changed from call to apply. Since we need to pass arguments as a combined list and applymethod does have this is provision to pass arguments as a list.

Finally, we are done with our custom mybindfunction. In our original (first one) code snippet, if we replace bindwith mybind, you will get the same results.

Thanks for reading this article. This has helped me to understand the concepts of call, apply, bind methods of javascript. I hope you would have learned something.

Geek Culture

Proud to geek out. Follow to join our +1.5M monthly readers.