DEV Community

Cover image for Creating your own bind() (Polyfill of bind)

Creating your own bind() (Polyfill of bind)

Uddesh on May 30, 2021

So, what is polyfill? Polyfill is a fallback for a method that is not supported by the browser by default. You can find browser support for any fu...
Collapse
 
hasnaindev profile image
Muhammad Hasnain

Great article, although, I don't think there is any need for this. It is 2021 and support for bind came between 2009 and 2011. Almost all operating systems for all types of devices comes with advanced built-in browsers that supports at least ES6 and almost all of them install and use modern browsers.

Collapse
 
uddeshjain profile image
Uddesh

Totally agree, But first of all it helps us to understand how bind() works behind the scene. Apart from that i was asked to implement polyfill of bind() in few interviews as well.

Collapse
 
davidmatossalvador profile image
David Matos salvador

this example is to understand how the black box works

Collapse
 
neer17 profile image
Neeraj Sewani

Nice article Uddesh.

Collapse
 
alekseiberezkin profile image
Aleksei Berezkin

Implementing bind with apply is kind of cheating 😉

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

I haven't used bind very often since arrow functions

Collapse
 
uddeshjain profile image
Uddesh

Arrow function are really helpful for adopting ‘this’ from their parent and in most of the use cases we don’t need ‘bind()’, But what if you want ‘this’ to refer to a particular object then you need to use ‘bind()’. I hope you got my point.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

To be honest, I only use bind for it's less well known second Param. I avoid using this and prefer pure functions, I have very few reasons to make this do anything, bimut that's just me ☺️

Collapse
 
prashan81992916 profile image
prashanth

This is a pretty cool post.

I would like to make a small alteration in your code.
We can eliminate the need for storing 'this' in the parent scope and using it at the time by invocation by making use of arrow function.

Function.prototype.myBind = function (obj, ...args) {
  return (...newArgs) => this.apply(obj, [...args, ...newArgs]);
};
Enter fullscreen mode Exit fullscreen mode

Hope this helps!!

Collapse
 
rahul4dev profile image
Rahul Singh
const module = {
  x: 42,
  getX: function () {
    return this.x;
  },
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// Expected output: undefined

const boundGetX = unboundGetX.myBind(module);
console.log(boundGetX());
// Expected output: 42
Enter fullscreen mode Exit fullscreen mode

This myBind does not give the expected output. It gives undefined for both consoles.

Collapse
 
esakki profile image
esakki29

Why because there is no return in your myBind return function. To fix this add return before func.apply line.

Collapse
 
abhishekjain35 profile image
Abhishek Jain

Good one. 🌟🌟

Collapse
 
uddeshjain profile image
Uddesh

Thanks. 🙂