The this
keyword is a very important concept in JavaScript. However, it has always been a tricky topic to comprehend especially for new JavaScript developers as well as developers with experience in other programming languages. Although this
is a bit of a complex topic, it is also one that appears as soon as you begin writing your first JavaScript programs. You will encounter it whether you are trying to access elements on the DOM, build classes in Object-oriented programming or use properties and methods of regular objects. In this article, we are going to take a deep dive into what the this
keyword is all about. With this objective in mind, let's get right to it.
In JavaScript, this
is a reference to an object. The object this
refers to will vary depending on how and where this
is being called. The object that this
refers to varies implicitly based on whether it is global, on an object, or in a constructor, and can also vary explicitly based on usage of the Function
prototype methods bind, call, and apply.
For the remainder of this article, our main focus will be to learn what this
refers to implicitly based on context, and we’ll learn how to use the bind
, call
, and apply
methods to explicitly determine the value of this
. So let's go!
Implicit Context
There are four main contexts in which the value of this can be implicitly inferred. These contexts are;
- the global context
- as a method within an object
- as a constructor on a function or class
- as a DOM event handler
Global Context
If we call this
by itself, meaning not within a function, object, or whatever, it will refer to the global window object. When you’re working in a browser, the global context will be window
meanwhile if you’re working in Node.js, the global context is global
. If you log the value of this
in your browser console without any other code, you will see what object this
refers to.
console.log(this)
// Output
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
You can see that this
is set to the window
object which is the global object of a web browser.
You have probably learned that JavaScript functions have their own context for variables. You might be tempted to think that this
will follow the same rules inside a function, but it doesn't. A top-level function will still retain the this
reference of the global object. In the example below, we are going to log the value of this
in a top-level function:
function printThis() {
console.log(this)
}
printThis()
//Output
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
The example shows that even within a function, this
still refers to the global object. However, this is not the case in strict mode. When in strict mode, the value of this
in the global context is undefined
.
Generally, it is safer to use strict mode to reduce the chances of this
having an unexpected scope. Someone will rarely want to refer to the window
object when using this
.
As an object method
Methods are basically actions that can be performed on objects or tasks that an object can perform. A method uses this
to refer to the properties of the object. Let's see what this looks like in code:
const cameroon = {
name: 'Cameroon',
language: ['English', 'French'],
describe() {
console.log(`The official languages of ${this.name} are ${this.language[0]} and ${this.language[1]}.`)
},
}
cameroon.describe()
//Output:
"The official languages of Cameroon are English and French."
A Class Constructor
A constructor on a class acts the same as a constructor on a function.
class Country {
constructor(name, yearofIndependence) {
this.name = name
this.yearofIndependence = yearofIndependence
}
describe() {
console.log(`${this.name} gained independence in ${this.yearofIndependence}.`)
}
}
const cameroon = new Country('Cameroon', 1960)
cameroon.describe()
this
in the describe
method refers to the instance of Country
, which is cameroon
.
A DOM Event Handler
In the browser, there exist a special this
context for event handlers. When using this
in an event listener, it will refer to the DOM element that fired the event. In an event handler called by addEventListener
, this
will refer to event.currentTarget
. More often than not, developers will simply use event.target
or event.currentTarget
as needed to access elements in the DOM, but since the this reference changes in this context, it is important to know.
In the following example, we’ll create a button, add text to it, and append it to the DOM. When we log the value of this
within the event handler, it will print the target:
const button = document.createElement('button')
button.textContent = 'Click me'
document.body.append(button)
button.addEventListener('click', function(event) {
console.log(this)
})
//Output
<button>Click me</button>
Explicit Context
To complicate matters a little more, javascript provides three native methods that can be used to manipulate the way the this
keyword behaves. These methods are call
, apply
and bind
. It is a little bit tricky to know exactly when to use any of these methods as it will depend on the context of your program. bind
is particularly useful when you want to use events to access properties of one class within another class. Suppose you have separated your code into various parts that each perform their own specific actions, you can use bind
to explicitly infer the object you want this
to refer to. Now, its time for us to learn how to use these three native methods to explicitly determine the object this
refers to.
Call and Apply
With call
we can invoke a method passing an owner object as an argument. In simpler terms, we can call a method indicating to which object the this
keyword will refer to. Let's see an example to help us understand it better:
const person1 = {
firstName: 'Francesco',
lastName: 'Sanchez',
sayName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName: 'Raul',
lastName: 'Jimenez'
}
console.log(person1.sayName.call(person2));
//Output
"Raul Jimenez"
Here we have two objects. Each with its firstName
and lastName
properties, and then person1
object has a sayName
method.
Then we call the person1
sayName
method in the following way: person1.sayName.call(person2)
.
By doing this, we're indicating that when the sayName
method executes, the this
keyword won't refer to the object that "owns" the method (person1
) but to the object we passed as parameter (person2
). As a result, we get the output we have seen above in our console.
Note: If the given method accepts arguments, we can pass them as well when we invoke it with call as seen in the example below.
const person1 = {
firstName: 'Francesco',
lastName: 'Sanchez',
sayName: function(city, country) {
return this.firstName + " " + this.lastName + ", " + city + ", " + country;
}
}
const person2 = {
firstName: 'Raul',
lastName: 'Jimenez'
}
console.log(person1.sayName.call(person2, "Bogota", "Columbia"));
//Output
"Raul Jimenez, Bogota, Columbia"
The apply
method works very similarly to call
. The only difference between them is that call
accepts parameters as a list separated by colons, and apply
accepts them as an array.
So if we want to replicate the same example using apply
we'd have to do it like this:
const person1 = {
firstName: 'Francesco',
lastName: 'Sanchez',
sayName: function(city, country) {
return this.firstName + " " + this.lastName + ", " + city + ", " + country;
}
}
const person2 = {
firstName: 'Raul',
lastName: 'Jimenez'
}
console.log(person1.sayName.apply(person2, ["Bogota", "Columbia"]));
Bind
In the same way as call
and apply
, the bind
method indicates the object to which the this
keyword will refer when a given method executes.
But the difference with bind
is that it will return a new function, without executing it. While with call
and apply
the function is executed right away, using bind
we must execute it separately.
Let's see this in an example:
const person1 = {
firstName: 'Francesco',
lastName: 'Sanchez',
sayName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName: 'Raul',
lastName: 'Jimenez'
}
const sayPerson2Name = person1.sayName.bind(person2)
console.log(sayPerson2Name())
//Output
"Raul Jimenez"
Arrow Functions
Arrow functions do not have their own this binding. Instead, they go up to the next level of execution. If you want to learn more about Arrow functions and how this behaves in Arrow functions, check out this article.
Conclusion
We have seen in detail how the this
keyword works in JavaScript, how to implicitly and explicitly infer the object this
refers to. I hope you enjoyed reading this article as much as I enjoyed writing it up. Hoping to bring more JavaScript packed articles to you soon. Stay blessed.
Top comments (0)