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(', ')}` : ''}`;
}
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
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
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
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)