this keyword and might find it confusing what it refers to at different points in your code. In this article, I aim to give you a robust framework to know exactly what it is, and what it refers to at any point in your code.
What is the 'this' keyword?
this or a function
this as it is reserved, much like the keywords
In the above example we use the
this keyword twice. The first inside the
constructor to set the name when initializing our virtual pet, and the second in the
introduceYourself class method which can use
this to refer to the single instance of the
VirtualPet. This means we can have two virtual pets and each can refer to their own name.
But outside of classes, the
this keyword has different meanings when we are dealing with regular functions and arrow functions.
'this' and regular functions
By default, regular functions change the
this variable when they are called. Here's how you remember it.
A telegram from the royal palace arrives at your at your home. As you read it, you discover you are formally invited to a prestigious function at the royal palace where you'll be among the likes of royalty and dignitaries. The evening will consist of a silver service of seven courses followed by formal dancing in the ballroom.
During your attendance, you notice that your surrounding are vastly different to what you are accustomed to. You see masterpiece paintings and intricate architecture. You stop and think. Now this is something else.
So, remember the following. When you use a regular
function, it's like physically going to a function where your surroundings, which we'll call
this is now different.
This is what we call our global variable.
Now let's say we're in a our
VirtualPet and we want to show the change in
this by calling a regular function.
So what just happened here? When inside a class method, the
this reference is the instance of the class. This is so you can do things like
this.whereAreYou() to call other methods within the class.
Where the regular function reveals it's behavior is when it's called from within the class, and as illustrated, when the function is called, it has a
this reference to the global object — which is the
Window object in a browser.
For the purpose of this illustration, I inserted a global variable called
isCurrentlyAt to show how
this.isCurrentlyAt changes depending on whether it's inside a class method (
whereAreYou) or a regular function (
Now, if you were to declare that function as an inline function inside the class method, the
this variable ends up being
undefined. So it loses the global reference when nested inside a class method.
To summarize, regular functions transport you to a different place where the
this is now different. Just like Cinderella going to the function at the palace, her surroundings are now different.
'this' and arrow functions
this at all.
In this example, we create two arrow functions,
randomLastname. Since they are created inside the method of a class instance, then their behavior is to preserve the
So to remember this, imagine the following:
You are a skilled archer and your function is to attack the enemy who is approaching. As you fire your arrow, you observe that your surroundings are still the same. Now this is the same as it was before firing your arrow.
So remember the following, with arrow functions, it's like firing an arrow, but your context of
this remains the same because you have not moved.
I felt it was important to draw a visual representation of what is happening so it is easier to remember. Regular functions are like going to social functions, your context changes because you go there. Arrow functions are like firing arrows and your context remains the same because you stay where you are.