Demystifying how 'this' works in Javascript
📣 Sponsor
It's something used all the time in Javascript, but often what it refers to is a mystery. In Javascript, this
works quite differently to other programming languages - and it works differently depending on if you are using use strict
mode or not.
If you find it hard, you aren't alone. Let's look at exactly how this
works, and remove any confusion as to what it means in various contexts.
What is this in Javascript
this
is a keyword in Javascript which refers to a property or set of properties within a certain context. The context we use this
in alters its properties. In the global context, this
refers to the global object - which in the browser is window
, but is globalThis
in Node.JS and other implementations of Javascript.
console.log(this); // The same as console.log(window);
Outside of any functions or code, this is always the case. However, in different places, this
means different things.
This in Functions in Javascript
In a function, this
still refers to the global object. If we reference this
in a function, it will by default, reference the window
or globalThis
object:
console.log(this); // The same as console.log(window);
function myFunction() {
console.log(this); // The same as console.log(window);
}
myFunction();
In strict mode, however, this
inside a function is undefined.
"use strict"
console.log(this); // The same as console.log(window);
function myFunction() {
console.log(this); // This is undefined!
}
myFunction();
Solving with call()
This is a little confusing at first, but the reason for this is because we need to add a this
object onto myFunction
- Javascript in strict mode won't default it to the global object. To do that, we have to use call()
. In the example below, I've turned myObject
into our this
variable:
"use strict"
console.log(this); // The same as console.log(window);
let myObject = {
firstName: "John",
lastName: "Doe",
age: 76
}
function myFunction() {
console.log(this.firstName);
}
myFunction.call(myObject); // this.firstName is defined as "John", so it will console log John
myFunction(); // this.firstName will be undefined, and this will throw an error.
call()
runs myFunction
and attaches myObject
to the this
keyword. If we don't use call, and simply run myFunction()
, then the function will return an error, as this.firstName
will be undefined. You are also able to call a function with an empty this
, which you can then append data to inside your function.
This gives us a fresh space to define variables on our this
object, rather than being polluted with data from the global this
object:
"use strict"
console.log(this); // The same as console.log(window);
function myFunction() {
this.firstName = 'John';
console.log(this.firstName); // This will be "John"
}
myFunction.call({});
Different behaviour in strict mode
As you can see, the behaviour is quite different depending on if we're using strict mode or not - so it's important you do some tests before changing your code between the two modes.
Call and Apply
You may sometimes see call()
being used interchangeably with a function called apply()
. Both of these functions are very similar, in that they both invoke a function with a specified this
context. The only difference is apply()
takes an array if a function has arguments, while call()
takes each argument one by one.
For example:
"use strict"
let otherNumbers = {
a: 10,
b: 4
}
function multiplyNumbers(x, y, z) {
return this.a * this.b * x * y * z
}
// Both will return the same result, the only difference
// being that apply() uses an array for arguments.
multiplyNumbers.call(otherNumbers, 1, 2, 3);
multiplyNumbers.apply(otherNumbers, [ 1, 2, 3 ]);
Simplifying this process using bind()
Another way to achieve similar behaviour to call()
is to use bind()
. Similar to call(), bind()
, changes the this
value for a function, only it does so permanently. That means you don't have to constantly use bind()
- you only use it once.
Here is an example, where we bind our object permanently to our function, thus updating this
permanently - we just have to define it as a new function. In the below example, we define a new function called boundFunction
, which is our myFunction
with myObject
bound to it permanently.
As such, when we call console log, it will show "John". This is different than call, which needs to be used each time we use a function.
"use strict"
console.log(this); // The same as console.log(window);
let myObject = {
firstName: "John",
lastName: "Doe",
age: 76
}
function myFunction() {
console.log(this.firstName);
}
let boundFunction = myFunction.bind(myObject); // this will bind this to myObject permanently.
boundFunction(); // since we used bind, this will now be set to myObject, every time we call boundFunction() - so it will return John.
Arrow Notation Functions and this
One of the key features to the arrow notation functions in Javascript is they hold no this
context. That means that they inherit this
from their parent. For example, let's say we are in strict mode and define both an arrow function and a "normal" style function. For the arrow function, this
will be inherited, but for the other function, this
will remain undefined!
"use strict" console.log(this); // The same as console.log(window); function myFunction() { console.log(this.name); // This will be "John" let myArrowFunction = () => { console.log(this.name); // This will be "John" } let myNormalFunction = function() { console.log(this.name); // This will throw an error, since this is undefined! } myArrowFunction(); myNormalFunction(); } myFunction.call({ name: "John" });
Constructor Functions and this
Another interesting thing about this
is that when used in a constructor function (that being a function using the new
keyword), the return of the constructor function essentially overwrites this
. So for example, if we run the following, although we set this.name
to John, the value returned for name
is Jack:
let functionA = function() { this.name = "John"; } let functionB = function() { this.name = "John"; return { name: "Jack" } } let runFunctionA = new functionA(); console.log(runFunctionA.name); // Returns "John"; let runFunctionB = new functionB(); console.log(runFunctionB.name); // Returns "Jack";
This in an Object Context
In an object context, using this
refers to the object. For example, suppose we run a function within an object called obj
, which refers to this.aProperty
- this
, in this case, refers to obj
:
let obj = {
aProperty: 15,
runFunction: function() {
console.log(this.aProperty); // Refers to 15
}
}
obj.runFunction(); // Will console log 15, since this refers to obj
This is also true if you use the get()
/set()
notation:
"use strict"
let obj = {
aProperty: 15,
runFunction: function() {
console.log(this.aProperty); // Refers to 15
},
set updateProp(division) {
this.aProperty = this.aProperty / division; // this.aProperty refers to 15
console.log(this.aProperty);
}
}
obj.updateProp = 15; // Will divide aProperty by 15, and console log the result, i.e. 1
Using this with Event Listeners
Another quirk of Javascript's this
is that when using an event listener, this
refers to the HTML element the event was added to. In the below example, we add a click event to an HTML tag with ID "hello-world":
document.getElementById('hello-world').addEventListener('click', function(e) {
console.log(this);
});
If we then click on our #hello-world HTML element, we will see this in our console log:
<div id="hello-world"></div>
Using this with Classes
It's worth noting in this section, that classes in Javascript are simply functions under the hood. That means a lot of the functionality we've seen with functions stands true for classes.
By default, a class will have this
set to the class instance itself. In the below example, we can see this in action - both runClass.name
and runClass.whatsMyName
return John.
class myClass {
whatsMyName() {
return this.name;
}
get name() {
return "John";
}
}
const runClass = new myClass();
console.log(runClass.name); // Returns "John"
console.log(runClass.whatsMyName); // Returns "John"
The only exception to this, is that static items are not added to this
. So if we define a function with the keyword static
in front of it, it will not be on this
:
class myClass {
getMyAge() {
return this.whatsMyAge();
}
static whatsMyAge() {
return this.age;
}
get name() {
return "John";
}
get age() {
return 143
}
}
const runClass = new myClass();
console.log(runClass.whatsMyAge()); // Throws an error, since runClass.whatsMyAge() is undefined
console.log(runClass.getMyAge()); // Throws an error, since this.whatsMyAge() is undefined
It's worth noting that classes, by default, are always in strict mode - so this
will behave in the same way it does for strict functions by default in classes.
Conclusion
In Javascript, this
can mean various things. In this article, we've covered what it means in different contexts - functions, classes, and objects. We have covered how to use bind()
, call()
and apply()
to add a different this
context to your functions.
We've also covered how to use this
in strict mode, versus non-strict mode. After this, I hope this
is slightly demystified.
More Tips and Tricks for Javascript
- The Free Course for Javascript
- How to Stop Using jQuery
- Javascript Array Slice Method
- An Introduction to Javascript
- How to Create the iPhone Interface with Long Press in Javascript
- Making your own Express Middleware
- Javascript Proxy: Using Javascript Proxies like a Pro
- How does Optional Chaining work in Javascript?
- How to select HTML elements in Javascript
- Javascript Types