DEV Community

Cover image for Writing polyfills — Javascript
Manoj
Manoj

Posted on

Writing polyfills — Javascript

A piece of code that provides functionality that is not natively supported by certain browsers or environments. In simple terms, a browser falback.

Before writing polyfills for the call(), apply() and bind() methods, please check the functionality of call, apply and bind.

let details = {
  name: 'Manoj',
  location: 'Chennai'
}

let getDetails = function (...args) {
  return `${this.name} from ${this.location}${args.join(', ') ? `, ${args.join(', ')}` : ''}`;
}
Enter fullscreen mode Exit fullscreen mode

1. Call Method:

Let’s create a polyfill for call(). We'll add a custom call method to the Function.prototype to make it accessible to all functions.

getDetails.call(details, 'Tamil Nadu', 'India');  // Manoj from Chennai, Tamil Nadu, India

// Polyfill
Function.prototype.myCall = function (ref, ...args) {
  if (typeof Function.prototype.call === 'function') {  // Checks whether the browser supports call method
    return this.call(ref, ...args);
  } else {
    ref = ref || globalThis;
    let funcName = Math.random();  // Random is used to overwriting a function name
    while (ref.funcName) {
      funcName = Math.random();
    }
    ref[funcName] = this;
    let result = ref[funcName](...args);
    delete ref[funcName];
    return result;
  }
}

getDetails.myCall(details, 'Tamil Nadu', 'India');  // Manoj from Chennai, Tamil Nadu, India
Enter fullscreen mode Exit fullscreen mode

2. Apply Method:

Let’s create a polyfill for apply(). We’ll add a custom apply method to the Function.prototype to make it accessible to all functions.

getDetails.apply(details, ['Tamil Nadu', 'India']);  // Manoj from Chennai, Tamil Nadu, India

// Polyfill
Function.prototype.myApply = function (ref, args) {
  if (typeof Function.prototype.apply === 'function') {  // Checks whether the browser supports call method
    this.apply(ref, args);
  } else {
    ref = ref || globalThis;
    let funcName = Math.random();  // Random is to avoid duplication
    while (ref.funcName) {
      funcName = Math.random();
    }
    ref[funcName] = this;
    let result = ref[funcName](args);
    delete ref[funcName];
    return result;
  }
}

getDetails.myApply(details, 'Tamil Nadu', 'India');  // Manoj from Chennai, Tamil Nadu, India
Enter fullscreen mode Exit fullscreen mode

3. Bind method

Let’s create a polyfill for bind(). We’ll add a custom bind method to the Function.prototype to make it accessible to all functions.

let getFullDetails = getDetails.bind(details, 'Tamil Nadu');
getFullDetails();  // Manoj from Chennai, Tamil Nadu
getFullDetails('India');  // Manoj from Chennai, Tamil Nadu, India

// Polyfill
Function.prototype.myBind = function (ref, ...args) {
  if (typeof Function.prototype.bind === 'function') {
    return this.bind(ref, ...args);
  } else {
    let fn = this;
    return function (...args2) {
        return fn.apply(ref, [...args, ...args2]);  // Merge and apply arguments
    }
  }
}

let getFullDetails = getDetails.myBind(details, 'Tamil Nadu');  // Manoj from Chennai, Tamil Nadu
getFullDetails('India');  // Manoj from Chennai, Tamil Nadu, India
Enter fullscreen mode Exit fullscreen mode

Thank you for reading! I hope you found this blog informative and engaging. If you notice any inaccuracies or have any feedback, please don’t hesitate to let me know.

Top comments (0)

Visualizing Promises and Async/Await 🤓

async await

☝️ Check out this all-time classic DEV post on visualizing Promises and Async/Await 🤓

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay