Let's write a polyfill for bind()

3 min readSep 20, 2019

For those of you who don’t know what polyfill is? Polyfill is basically back support of methods which our old browser doesn’t support. So we have to write our own polyfill of that method in order to use it. Here we are gonna implement polyfill of bind function which we commonly use.

The basic implementation of bind goes like

let basic = {
  'name': 'shyam',
  'age': 24
};

function callMe(city) {
  console.log('Hi! my name is ' + this.name + ' and my age is ' + this.age + ' and my city is ' + arguments[0] + ' and state is ' + arguments[1]);
}let callBinded = callMe.bind(basic, 'jammu');callBinded('j&k'):Output: Hi! my name is shyam and my age is 24 and my city is jammu and state is j&k

As can be seen, callMe got the context of basic object via bind function and arguments form both callMe function and callBinded function. We are gonna create the same functionality.

Let’s call out bind function as mybind. First thing first, mybind should return a function which when called should call function on which mybind is applied.
For eg: if you call callBinded here, it should call callMe function. Secondly, all the scope of the object should be passed as context to out callMe function. Thirdly if we pass any arguments to callMe or callBinded it should all been pass to CallMe function. Let's implement that.

Function.prototype.mybind = function (context) {
  let fn = this;
  return function () {
      return fn.call(context)
  }
};

This is just 40% of functionality we needed where we are passing object scope to binded function and calling it when binded function is executed. Here we are extending the prototype of Function so that we can extend our method to any function we created. For more information read: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype

What missing from this polyfill is arguments in mybind function and also in the returned function. So let's fix that.

Function.prototype.mybind = function (context, ...args1) {
  let fn = this;
  return function (...arg2) {
      return fn.apply(context, [...args1, ...arg2])
  }
};

We are using spread operator here, those who don’t know what spread operator is, you can read it from here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

So, here we fetch all arguments passed in mybind and returned function via args1 and args2 and created a bigger array having both array elements and passed that as arguments to our binded function.

Now our mybind function will work exactly as bind function, we can validate it by calling it in our first example

let basic = {
  'name': 'shyam',
  'age': 24
};

function callMe(city) {
  console.log('Hi! my name is ' + this.name + ' and my age is ' + this.age + ' and my city is ' + arguments[0] + ' and state is ' + arguments[1]);
}let callBinded = callMe.bind(basic, 'jammu');
let mycallBinded = callMe.mybind(basic, 'jammu');callBinded('j&k'):
mycallBinded('j&k');Output1: Hi! my name is shyam and my age is 24 and my city is jammu and state is j&k
Output2: Hi! my name is shyam and my age is 24 and my city is jammu and state is j&k

This completes the writing of our polyfill of bind function. Let me know for any queries or suggestions.

Let's write a polyfill for bind()

Written by Shyam Tayal