What does thethiskeyword in JavaScript mean? And how can you use it practically in your JavaScript program? These are some of the common questions that newbies and even some experienced JavaScript developers ask about thethiskeyword.
If you’re one of those developers wondering what thethiskeyword is all about, then this article is for you. Explore whatthisrefers to in different contexts and familiarize yourself with some gotchas to avoid confusion, and of course, bugs in your code.
“this” Inside the Global Scope
In the global context,thiswill return thewindowobject as long as it’s outside a function. Global context means that you don’t place it inside a function.
If you run the above code, you’d get the window object.
“this” Inside Functions (Methods)
When used inside of functions,thisrefers to the object that the function is bound to. The exception is when you usethisin a standalone function, in which case it returns thewindowobject. Let’s see some examples.
In the following example, thesayNamefunction is inside themeobject (i.e., it’s a method). In cases like this,thisrefers to the object containing the function.
thisis themeobject, so sayingthis.nameinside thesayNamemethod is exactly the same asme.name.
Another way to think of it is that whatever is on the left side of the function when invoked will bethis. This means that you can reuse thesayNamefunction in different objects andthiswill refer to a completely different context each time.
Now, as earlier mentioned,thisreturns thewindowobject when used inside a standalone function. This is because a standalone function is bound to thewindowobject by default:
Callingtalk()is the same as callingwindow.talk(), and anything that’s on the left side of the function will automatically becomethis.
On a side note, thethiskeyword in the function behaves differently inJavaScript’s strict mode(it returnsundefined). This is also something to keep in mind when you’re using UI libraries that use strict mode (e.g. React).
Using “this” With Function.bind()
There may be scenarios where you can’t just add the function to an object as a method (as in the last section).
Perhaps the object is not yours and you’re pulling it from a library. The object is immutable, so you can’t just change it. In cases like this, you can still execute the function statement separately from the object using theFunction.bind()method.
In the following example, thesayNamefunction isn’t a method on themeobject, but you still bound it using thebind()function:
Whatever object you pass intobind()will be used as the value ofthisin that function call.
In summary, you can usebind()on any function and pass in a new context (an object). And that object will overwrite the meaning ofthisinside that function.
Using “this” With Function.call()
What if you don’t want to return a whole new function, but rather just call the function after binding it to its context? The solution for that is thecall()method:
Thecall()method immediately executes the function instead of returning another function.
If the function requires a parameter, you can pass it via thecall()method. In the following example, you’re passing the language to thesayName()function, so you can use it to conditionally return different messages:
As you can see, you can just pass any parameter you want to the function as the second argument to thecall()method. You can also pass as many parameters as you want.
Theapply()method is very similar tocall()andbind(). The only difference is that you pass multiple arguments by separating them with a comma withcall(), whereas you pass multiple arguments inside an array withapply().
In summary,bind(), call(), and apply()all allow you to call functions with a completely different object without having any sort of relationship between the two (i.e. the function isn’t a method on the object).
“this” Inside Constructor Functions
If you call a function with anewkeyword, it creates athisobject and returns it:
In the above code, you created three different objects from the same function. Thenewkeyword automatically creates a binding between the object that is being created and thethiskeyword inside the function.
“this” Inside Callback Functions
Callback functions aredifferent from regular functions. Callback functions are functions that you pass to another function as an argument, so they can be executed immediately after the main one has finished executing.
Thethiskeyword refers to an entirely different context when used inside callback functions:
After one second of calling thepersonconstructor function and creating a newmeobject, it’ll log the window object as the value ofthis. So when used in a callback function,thisrefers to the window object and not the “constructed” object.
There are two ways to fix this. The first method is usingbind()to bind thepersonfunction to the newly constructed object:
With the above modification,thisin the callback will point to the samethisas the constructor function (themeobject).
The second way to solve the problem ofthisin callback functions is by using arrow functions.
“this” Inside Arrow Functions
Arrow functions are different from regular functions. you’re able to make your callback function an arrow function. With arrow functions, you no longer needbind()because it automatically binds to the newly constructed object:
Learn More About JavaScript
You’ve learned all about the “this” keyword and what it means in all the different contexts in JavaScript. If you’re new to JavaScript, you’ll greatly benefit from learning all the basics of JavaScript and how it works.
