How to Write a Polyfill for bind in JavaScript

How to Write a Polyfill for bind in JavaScript

Writing a polyfill for bind is a common interview question. Here is the step-by-step implementation.

What bind Does

bind returns a new function with this permanently bound and optional preset arguments.

Step 1: Basic Implementation

Function.prototype.myBind = function (context) {
  const fn = this;
  return function () {
    return fn.call(context);
  };
};

Step 2: Support Preset Arguments

Function.prototype.myBind = function (context, ...presetArgs) {
  const fn = this;
  return function (...laterArgs) {
    return fn.call(context, ...presetArgs, ...laterArgs);
  };
};

Step 3: Support new Operator

When a bound function is called with new, this should be the new object, not the bound context:

Function.prototype.myBind = function (context, ...presetArgs) {
  const fn = this;
  const boundFn = function (...laterArgs) {
    const isNew = this instanceof boundFn;
    return isNew
      ? new fn(...presetArgs, ...laterArgs)
      : fn.call(context, ...presetArgs, ...laterArgs);
  };
  boundFn.prototype = Object.create(fn.prototype);
  return boundFn;
};

Testing

function greet(greeting, punctuation) {
  return `${greeting}, ${this.name}${punctuation}`;
}
const obj = { name: "Kunal" };
const bound = greet.myBind(obj, "Hello");
console.log(bound("!")); // "Hello, Kunal!"

The Takeaway

bind polyfill: return a function that calls the original with call(context, ...presetArgs, ...laterArgs). Support preset arguments with rest/spread. Support new by checking this instanceof boundFn. Set boundFn.prototype for the prototype chain.