The keyword this
in JavaScript is one of the most muddling concepts because its value depends on where it is used. Often it tricks developers and sometimes it's the culprit behind surreal results.
Let's discuss this this
keyword with simple and easy-to-understand examples before actually delving into the call
, apply
, and bind
methods as this
keyword is the main reason for having those methods.
What is this in JavaScript?
The this
keyword in JavaScript refers to the object that the function is a property of and this
will depend on the object that is invoking the function.
To get a quick idea of this
have a look at the code snippet below.
const myObj = {
name: 'John',
age: 25,
place: 'London',
myFunction: function() {
return this;
}
};
myObj.myFunction();
// {name: "John", age: 25, place: "London", myFunction: ƒ()}
In the above code snippet, you can see that when myFunction
method is called it returns the value of this
, which is nothing but the myObj
itself. If you recollect the definition for this
in the previous paragraph, it says this
refers to the object that the function is a property of, so here myFunction
is a property of myObj
, which means this
is referring to that myObj object.
A simple trick is whatever precedes before .(dot) is the object referenced by the this
keyword. So before .(dot) in myObj.myFunction()
is myObj
, which is the value of this
.
Let's take another example to understand this.
function myFunction() {
return this;
}
myFunction(); // window or undefined(in case of 'strict mode')
In the above code we are returning this
from the myFunction
, so when myFunction
is called what we see or get is the value of this
.
Again if we recollect our definition of this
, it refers to the object which the function is a property of. Here our function myFunction
is a property of global object nothing but the window
object in the browser, so which means when we call myFunction
the value of this
is going to be the window
object.
If we go by our trick of .(dot) preceding the function, here there's no dot but every function is a method in the window
object, so it translates to window.myFunction()
so here, the this
keyword refers to the window
object.
In order to avoid functions getting attached to the window object, we use strict
mode so as a result window will be undefined
in such cases.
So keep in mind our definition as we're going to use that for understanding call
, apply
and bind
methods.
The this keyword in JavaScript refers to the object that the function is a property of and this will depend on the object that is invoking the function.
Understanding call, apply, bind in JavaScript
Let's consider an object person
with a property name
and a method details
.
const person = {
name: 'John',
details: function(age, place) {
return `${this.name} ${age} years old, lives in ${place}`
}
}
person.details(25, 'London'); //John 25 years old, lives in London
When we call the method details
on person
object with the arguments, we knew that this
refers to the person
object because details
is a property of the person
object and so this.name
would be John and so the result that gets returned will be as shown in the comments.
This part is going to be clear as we knew what this
means in the person
object.
Let's consider a scenario where we wanted to use the details
method but with different arguments.
As per the details
method we can pass in different age and place values but how about the name, as it is connected with the this
keyword? This is where we are going to use those special methods call
, apply
and bind
. Let's dive into those.
Using call
method
Now we want to associate a different object other than person
to this
keyword of details
method. So to do that we're going to use the call
method as shown below in the code snippet.
person.details.call({ name: 'James'}, 30, 'Tokyo');
// James 30 years old, lives in Tokyo
A call
method takes a new object that we want this to refer to followed by the arguments to the function(nothing but the details
method) and it gets called referencing this
to the new object passed as the first argument. Voila! That's what a call method is.
Using apply
method
Guess what, apply
method is just the same as the call
method, that is, it takes a new object as the first argument to reference the this
keyword and is followed by an array of arguments. So it means you can simply pass the arguments to the details
function in the form of an array instead of passing individually. Have a look at the code below so it becomes clear for you.
person.details.apply({ name: 'James'}, [30, 'Tokyo']);
// James 30 years old, lives in Tokyo
So call
and apply
methods are used to reference a new object to this
keyword on methods.
And then what bind
is for? Guess!
Using bind
method
When call
and apply
methods are applied they are called(invoked) directly referencing the new object passed but in order to get a new function reference that can be used to call at later times, the bind
method is used. Have a look at the code snippet below to get more clarity.
const personDetails = person.details.bind({name: 'William'}, 40, 'Rome');
personDetails();
// William 40 years old, lives in Rome
So using the bind
method returns a new function reference which can be called at a later time and that is all about the bind method.
So putting all the three methods together.
const person = {
name: 'John',
details: function(age, place) {
return `${this.name} ${age} years old, lives in ${place}`
}
}
person.details(25, 'London'); //John 25 years old, lives in London
// Using call
person.details.call({ name: 'James'}, 30, 'Tokyo'); // James 30 years old, lives in Tokyo
// Using apply
person.details.apply({ name: 'James'}, [30, 'Tokyo']); // James 30 years old, lives in Tokyo
// Using bind
const personDetails = person.details.bind({name: 'William'}, 40, 'Rome');
personDetails(); // William 40 years old, lives in Rome
So in short CAB(call, apply, bind in JavaScript) are used to reference a new owner object to the this
keyword. Hope this article has demystified the call, apply and bind methods in JS.
Did we miss anything here? Yes, the this
value will be different when we use an arrow function. See you in the next article.
If you liked this article please give a follow & share. More such interesting articles are on the way.
I'll be sharing interesting tips, tricks and hacks about web development and technology on Twitter @wahVinci and Instagram @dev_apt
Top comments (5)
👏🏾👏🏾👏🏾
Couldn’t have been explained clearer.
You sure did demystify these concepts for me Basharath😩.
Looking forward to the next
This is so good to hear. I use to even confuse a lot with these terms and I wanted to have a clear reference so I can even look at it at later times if I forget these concepts.
BTW, I'll be frequently adding new articles on my blog devapt.com, and you can have a look at it. Till I post anything new here. Thank you 👍
This is one of the best articles i have ever read. It was so clear. Great one!
Just so glad to hear that. So good of you ❤️
Great