JS Interview Question: Explain Function.prototype.bind
It took me awhile to understand how ‘this’ keyword works, but after reading about bind method, its starting to make sense regarding the context of an object set explicitly and being able to access with ‘this’ keyword.
A common issue that arise when we use functions is dealing with a function’s scope and an object’s context.
** it’s important to understand the difference between function scope and object context.
Every function has its own scope with visible and accessible variables, but when we define closures, these inner functions creates its own scope as well. If we were to access the outer function’s context from inner functions (closures), we will need to declare a variable specifying the outer function’s context.
var self = this;
To avoid polluting an outer function’s scope, we can use bind method instead. Once we invoked a function with bind method, it bounds our closure or inner function with the outer function’s scope.
var foo = function() {
// some content
console.log(this);
}.bind(this);
We are also able to pass in 2nd arguments if needed.
Though, IE8 and below doesn’t support bind(), there is a polyfill available to fix this issue. Polyfill here and more info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
There are other methods of setting the scope of a function. Other two are apply() and call().
Difference between apply() & call() and bind() method is:
Functions invoked with apply() & call() methods gets executed first and of course, we also pass along the function’s scope as well
… while …
Functions invoked with bind() method just sets the scope, but doesn’t get executed. Awesome! B-)
Now another issue is when we pass around functions. Its function context actually changes as well depending on where the function is invoked. It doesn’t necessarily bound to a specific object as we expect it to be bound to, rather, it may also bound to a global object, other outer objects, or even an HTML element, depending on where we invoked the function.
** Note, that invoking a function is different from creating a new instance of an object.
Below is an interesting (coz its new to me) Code sample with commented out explanation. It shows how ‘this’ keyword can be mistakenly bound to an HTML element and how bind() can fix it.
Awesome ref:
Also
If you are looking for a platform to develop your clients’ website, check out my SAAS platform https://ecompurpl.com
EcomPurpl.com is the all-in-one solution for anyone looking to create a website. Templates, E-Commerce, Hosting, Galleries, Booking & Appointments, CRM, 24/7 support, and integration of your app are all included.
