The this
keyword in JavaScript can be quite tricky if not understood. It's one of those things that even experienced developers find hard to easily grasp but once you do, it can save you alot of time.
In this article, we will see what it is, how it works in different situations and common mistakes you shouldn't fall into when using it.
Understanding this
in JavaScript
this
simply refers to the object that's currently being used in a javascript code. But here’s the tricky part: what this
refers to can also change depending on where and how you use it in your code. one might ask "why is that?" Well, this
is dynamic in nature =, meaning that - its value is determined when a function is called, not when it's written.
this
in Global and Function Contexts
When you use this
in a global context, it often refers to a global object, which quite makes sense right? So, if you just type this
in your browser’s console, it’ll point to the window.
While when used inside a function, it behaves quite differently. For example: if you call a function "myFunction" for instance, this
will still point to the global object but if you use the strict mode in Javascript, it will make it undefined inside that function.
Yeah, I know it's quite confusing, just follow along. I will explain better.
this
in Objects
When you use this
inside a method (a function that’s a property of an object), this
refers to the object that the method belongs to.
Example:
const myObject = {
name: 'Alice',
greet: function() {
console.log(this.name);
}
};
myObject.greet(); // Output: 'Alice'
Here, this.name
refers to myObject.name
, which is 'Alice'.
this
in Constructors and Classes
Constructors: When you create an object using a constructor function or a class, this refers to the new object being created.
Example:
function Person(name) {
this.name = name;
}
const person1 = new Person('Bob');
console.log(person1.name); // Output: 'Bob'
In the code, this.name
refers to the name property of the new Person object.
Common Mistakes and How to Avoid Them
One common mistake with this is losing its correct value in callbacks or event handlers. For instance, if you pass a method from an object as a callback, this might not refer to the object anymore.
Solution: To avoid this, you can use an arrow function or bind to keep this pointing to the right object.
const myObject = {
name: 'Eve',
greet: function() {
setTimeout(() => {
console.log(this.name);
}, 1000);
}
};
myObject.greet(); // Output: 'Eve'
Conclusion
The this
keyword can be a pain in the ass, but all you have to take note is that it changes depending on how and where you choose to call it. To get better at it, use it to practice with loads of examples, and with no time, you will become a pro with it.
Top comments (0)