bind? And why is the
I wanted to put an end to all the confusion caused by the context of
this to access and modify object properties as well to use customize its context in a smart and performant way.
Functions, Properties, and Methods
See example below:
needsRefill is a property of the
coffeeMaker object. And since it’s a function, it has to be invoked to determine whether the coffeeMaker needs a refill or not.
The differences between call, apply, and bind
apply invoke a function. Their only difference is that
call accepts arguments in a comma-separated fashion while
apply requires arguments to be passed as an array or an array-like object.
Bind returns a function. Examples coming up.
When and why should I use them?
- To borrow another object’s methods or
- To create a custom value of this
1. Borrowing another object’s methods
call is defined in the MDN docs:
call()allows for a function/method belonging to one object to be assigned and called for a different object.
Meaning, it’s possible to invoke an object’s method on a totally different object.
From the above examples, the
getYearOfRelease method belongs to the
theFirm object. However, we were able to call it on the
theDaVinciCode object! How magical is that?
Another example would be a typical use of
hasOwnProperty to check if an object possesses a particular property. It’s recommended to (play it safe) use
Object.hasOwnProperty.call(yourObj, yourProp)instead of calling
hasOwnProperty directly on the object (which overlooks the fact that the
obj might not be a true instance of the
Object. For instance, if the
obj was created by calling
Object.create(null) , then calling
obj.hasOwnProperty(prop) will fail since the
obj does not have reference to the
Object.prototype. By using
call , we are able to ‘borrow’ the
hasOwnProperty method from the Object.
To make it easy, let’s use the (call) examples above, but instead use
Again, the only difference between
apply is that with
apply you have to pass arguments as an array. Not doing so will fail with a
bind returns a function. For example:
boundFunction refers to
getYearOfRelease and will be called on the
theDaVinciCode object. You can call
bind passing the arguments directly or pass the arguments in the bound function itself.
2. Creating a custom value of ‘this’
As seen in the above examples, it is possible to invoke an object’s method(s) on another. Let’s take a step back.
What is the ‘this’ keyword?
this keyword is the ultimate cause of confusion for programmers because it’s used differently in object-oriented coding languages. Here’s my attempt at officially clearing things up:
An object is able to access and manipulate its own properties all thanks to the
this keyword. In the
theFirm object, the
getYearOfRelease method is able to access its parent’s
There are many misconceptions around the value of
this in an object or in a function. Keep this in memory: the value of this is assigned when a method or function is called. And NOT where it is defined!
theFirm.getYearOfRelease is being invoked, the value of
this is assigned to the
theFirm . However, calling
getYearOfRelease without the dot will assign the value of this to the global / window object. See the example below:
this is pointing to the window object which at that point doesn’t contain the
yearOfRelease property. So again, to reiterate, the value of
this is only assigned where a method or function is invoked but not where it is defined.
sayHello returns ‘Hello, undefined’. How can the undefined be resolved? Thanks to
bind (that we discussed above), we can assign the value of
this to whatever we want!
Problem solved! We assigned the value of
this to the
user object which in turn gives us access to the