? And why is the
I wanted to put an end to all the confusion caused by the context of
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:
is a property of the
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
invoke a function. Their only difference is that
accepts arguments in a comma-separated fashion while
requires arguments to be passed as an array or an array-like object.
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
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
method belongs to the
object. However, we were able to call it on the
object! How magical is that?
Another example would be a typical use of
to check if an object possesses a particular property. It’s recommended to (play it safe) use
instead of calling
directly on the object (which overlooks the fact that the
might not be a true instance of the
. For instance, if the
was created by calling
, then calling
will fail since the
does not have reference to the
. By using
, we are able to ‘borrow’ the
method from the Object.
To make it easy, let’s use the (call) examples above, but instead use
Again, the only difference between
is that with
you have to pass arguments as an array. Not doing so will fail with a
returns a function. For example:
and will be called on the
object. You can call
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?
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
keyword. In the
method is able to access its parent’s
There are many misconceptions around the value of
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!
is being invoked, the value of
is assigned to the
. However, calling
without the dot will assign the value of this to the global / window object. See the example below:
is pointing to the window object which at that point doesn’t contain the
property. So again, to reiterate, the value of
is only assigned where a method or function is invoked but not where it is defined.
returns ‘Hello, undefined’. How can the undefined be resolved? Thanks to
(that we discussed above), we can assign the value of
to whatever we want!
Problem solved! We assigned the value of
object which in turn gives us access to the