Bind Polyfill in JavaScript: Step by Step Explanation

Understand bind polyfill in JavaScript: Step-by-Step Explanation

Step 1: Validate, that the invoker should function, if not then throw an Error

Step 2: Set context to globalThis, if nothing is defined. globalThis has window context in the browser and global in the Node environment. It means if there is no context defined as part bind(), then the default context is the window.

Step 3: Create a symbol and assign the function to that symbol key, it works like below

let's say context (object) has a key mapped to the function, and in this case, that function can access the object context

context obj {
      context keys
      <unique symbol key> : this  👈 Now this has access to the whole context object
}

Step 4: Finally Return a function, and on call of that bonded function it calls currentContext[<unique symbol key>] with the provided rest of the arguments as part of bind and while calling that function. 

Function.prototype.myCustomBind = function (context, ...args) {
   
     // Check if the myCustomBind is invoked by a function <this>.myCustomBind()
    if (typeof this !== "function") {
      throw new Error(this + "is not a function");
    }

    // Set the context to the provided context or globalThis if none is provided
    const currentContex = context || globalThis;

    // Create a unique property to avoid name collisions
    const newFunc = Symbol();

    // Assign the original function to the new property in the context
    currentContex[newFunc] = this;

    // Return a new function that, when called, will execute the original function
    return function (...newArgs) {
          // Call the original function with the original args and any new args
          return currentContex[newFunc](...args, ...newArgs);
    };
};

const defaultBind = userType.bind(user);
defaultBind(); // Ram is 23 years old

const bindFunc = userType.myCustomBind(user);
bindFunc();  // Ram is 23 years old

Once you understand how binds work, it will be very easy to understand the other function methods call & apply and their polyfill implementation.

Further Reading

👉 Call Polyfill in JavaScript: Step by Step Explanation