DEV Community

Cover image for Writing polyfills — Javascript
Manoj
Manoj

Posted on

Writing polyfills — Javascript

#javascript #webdev #learning #programming

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)