6.1 The `this` Object

Hi folks, in this lesson we're going to take a look at the this Object in JavaScript. The value of this Object is usually, but not always an Object. But it can refer to different Objects depending on where it is used. Inside a function, the value of this varies depending on how the function is called. For example, we are inside an immediately invoked function expression at the moment. So let's just try logging out the value of this to see what it refers to. And we can see that it is actually undefined inside a function. So when we use this inside a function and the function is invoked in the normal way that a function is invoked, with the double parenthesis at the end of it, this will be undefined in strict mode. Now the value will change if we're not in strict mode. And if we're not running in strict mode, inside a function, this will point to the global window object. And that can actually be quite dangerous. This is another reason why we need to always use strict mode, when applicable. If we are inside of a function which is the property of an object, so a method, this will point to that object. So in the second console log you can see that the object itself has been logged to the console, which means that the this Object points to the Object that the method is within. Now, we've called the function in a different way. We have used a set of parenthesis after the function to invoke it like we would do a regular function, but because the function is called as the method of an object, the value of this changes. And in this case it changes to the object that the method belongs to. Whenever we are outside of the function, the this object will still point to the window object, regardless of whether or not we're running in strict mode. So now we're outside of the immediately invoked function expression and as use strict is within the immediately invoked function expression, strict mode will only be applied inside the IFFE. We've now added a log outside of it. So let's just go back to the browser again. And you can see that we're logging the window once again. So use strict won't protect us in this case. As we saw in a previous lesson, there's also another time that the this object can point to something different. And that is when we are inside a constructor function. Now, we did already go over this but because that was in a different section of the course, I just want to recap over that once again. So it's a very similar example to the last time we looked at this topic. So we're using a constructor once again and the constructor accepts a name, arguments and inside of the constructor we just set a property of this to equal the name that gets passed into the constructor. So even though the constructor function is defined as a regular function, when we call it, as long as we're calling it properly, we will be calling it in a different way. We will be calling it like this. So the difference in how we are invoking the function this time is we are using the new keyword. And that's how JavaScript knows to invoke the function as a constructor. And when it invokes a function as a constructor, the this object inside the function will point to instances created by the constructor. It won't point to the constructor itself, like you might expect. So in this case where we have created a variable called Bob, when we invoke the person constructor, the Bob variable will end up containing and instance created by the passing constructor. And so in this case, this will point to the instance object. There is another time that the this object can change what it points to as well, and that's when we're inside the function which is being used as an event handler. In this case, the function will be invoked when an element triggers it from the UI, like when a button is clicked. In this case, the this object will be set to the element that triggered the event. So if it was a button that was clicked, which triggered the event, the this object will point to that button. We're gonna come back and look at event handlers in much more detail in the dom events lesson later in the course. For now, just understand that this is one more time when the this object might change what it points to, and that's when the function it is within is being used as an event handler. There are some different ways in which we can control what the this object points to, such as when we're using methods like call or apply. We did see the call method very briefly in an earlier lesson. But we're gonna come back and look at both of these methods in much more detail in the next lesson. So in this lesson, we looked at the different values that the this object can have in JavaScript depending on the context. We saw that in the global context, this points to the window object. And while we're inside a function, this is undefined. If we are inside the method of an object, this will point to the object itself. And when we use this inside a constructor, this will point to instance object. It's created by the constructor. In the next lesson then, we're going to move on and look at some methods and properties of function objects, including the call and apply methods. Thanks for watching.