3.2 The this Keyword

[SOUND]. In today's lesson of Thirty Days to Learn jQuery, we are going to take a step back and focus on the this keyword. In the previous lesson, a lot of the feedback that came back was, I'm still having trouble understanding what this refers to in different contexts. So, we are going to dig into that big time today. So, don't worry, it's not going to be nearly as in depth as the previous lesson. We'll take a little bit of a break today. Okay, so what we have here is a simple anchor tag. Now, we're going to figure out, in different contexts, what this will refer to. So, within script tags to begin, we are simply going to console.log this. What is this refer to when it is not inside any function? If I open up Chrome Developer Tools. Open up the console, you'll see that this will refer to the parent or the window object, and that's what this will always refer to. It's going to refer to whatever object owns it, if that makes sense. So, in this case, when we are in the global space, this is going to refer to the parent window object. All right, well that makes sense. But what if we create a function? And we will call it doSomething. Now, if we take the console.log and place it within here, what do you think it's going to refer to within here? I dunno, let's try it out. We can either execute this function by running doSomething, or we can make it auto execute by wrapping it within parentheses and then calling the function. And this is the same idea as when use self-invoking anonymous functions. The only difference is, rather than giving it a name, we are using an anonymous function. The same idea, but now the function will execute immediately. Refresh the page, and once again, this, even within that function, is still referring to the parent object. Now, if I step back a few clicks. What if now, we check for this when the anchor tag is clicked? And we know how to do that now. We know how to grab the anchor and say when this anchor is clicked, then execute a function. So, when it's clicked, execute doSomething. What do you think this is going to refer to now? Well, before we figure that out, let's just watch what happens when we execute doSomething. It may not be what you expect. I'm going to reload the page and click on it, and it takes us to that link. And this is an important distinction to make. The anchor tag has a default action, and that action is, when it is clicked, it should redirect to whatever is stored within the href attribute. So, what happens though, when you want it to be clicked but you want to cancel that default action? You wanna say, nope, don't link to it. I'm going to do something else. And this is something you'll do quite a bit in your JavaScript applications. Well, our callback function will receive an event object. And this event object can be called whatever you want. You can name it Jeff, or evt, or even event. It's very common to do e, or evt though. And this will contain information about the event itself. Now, among those things, we can also specify that this event should prevent its default action. And we can do that by typing e.preventDefault, prevent the default action of the anchor, which is to redirect to a different page. Now, if I try it again, and I click on Click Me, nothing is going to happen because we have disabled that default action. Now, right here we can see we have console.log to the event object. And I don't expect you to understand all of this, but it's essentially everything that was related to the event that occurred. So for example, where was the mouse when the link was clicked? What was the target of the event? Was it an anchor tag that was clicked? What about the Control key? When the link was clicked, was the Control key pressed by the user? So, it contains lots of information like that. In our case though, we only need it to prevent the default action of the anchor tag. So, I'm going to delete our event object, but now you're going to see that this time, this no longer refers to the parent window object. It now refers to a new object that contains it. And that object is the anchor element. So, that's what you always need to be thinking about when you run a method. What is the parent object? In many cases, like regular functions, the parent is going to be the global window object. But inside of an event handler, this is going to refer to, in this case, the anchor object. Let's take a look at another example. I'm gonna create an object here. And we'll simply call it obj. And we simply want to have a method within here. And we'll call doIt. Very simple for our demo. And within here, I'm going to log this. And now, when the user clicks on the anchor tag, I want to call obj.doIt. Now once again, this method is going to be called, the event object is going to be passed to it. We need to be sure to prevent that default action. And I better make sure that this is capitalized. All right, let's try and see what we get here. What is this going to refer to this time? Reload the page. I will click on Click Me, and once again, this is referring to that anchor element. There will be times when, for example, like this. You wanna call a method, and within that method, you want this to refer to its parent object, which would be this obj object. So, a couple ways to handle this. One of them, we could pass an anonymous function. And then we could call the method, obj.doIt(), and this time, when we call that method, this will no longer refer to the anchor element. It's going to refer to the obj object, and that means, because this doIt method is no longer related to the anchor, it's not going to receive an event object. And we can copy e.preventDefault and place it here. And it's important to note that you can place e.preventDefault at the bottom or at the top, it doesn't really matter, though it's most common to place it at the bottom. All right, so now that we have updated our code, let's see what this refers to now. Reload. I will click on the link and now this is referring to the obj object that we created. So, definitely this can take a little bit of time to wrap your head around, but now it still gets a little bit more complicated. What if, when do you call the doIt method from here. You still want this to refer to the anchor element. Well in that case, we wanna call the method, and we went over this briefly in a previous lesson. We're going to call the doIt method, and we want to specify what should represent this. I can simply pass this, because we know within this callback function, this refers to the anchor that was clicked. So now, we are calling the doIt method and we're saying, from inside that doIt method, this should refer to the anchor that was clicked. And then if you have any variables that you need to pass through, for example if you wanna pass through the event object or anything else, you would do that as the next parameters. Okay, so now let's try it and see what happens. Refresh, Click Me, and once again within the doIt method, this is referring to that anchor element. Now, in addition to the call method, there is also a method you'll see called apply. And the only difference between those two is how you pass the variables. With apply, you're going to pass an array that contains the variables that you want doIt to receive. However, with call, you can simply pass a comma-separated list of your variables. Now, which one you use we really depend on the project. In this case, call will work just fine. Now, jQuery offers another way to specify what this is via jQuery.proxy. So, let's see how that one would work. I'll comment this code out for you. And then, once again, we get the anchor element, wrap it in jQuery. We listen for when it's clicked. And when it is, we call obj.doIt. Get the obj object and call the doIt method on it. Now, as we know, within this method this is going to refer to the anchor that was clicked. Let's prevent the default, reload the page, click on it, and we are right. This is the anchor that was clicked. Now, if we wanna specify that this again should refer to obj or any other object, we can easily use jQuery.proxy, which will return a new function that has set this properly. So, jQuery.proxy. The first parameter is going to be, what is the method that we're going to call? We're calling obj.doIt. I'll add a couple spaces here. And as the second parameter of jQuery.proxy, we need to specify what will be treated as this. Or, within the method when you wrap this in jQuery, what is that going to refer to? And in this case, we want it to refer to obj. Or in your case, it could be something different. Whatever it needs to be, equal to the this keyword. So in this case, when doIt is called, we wanna make sure that within this function, this refers to obj. Now, let's try it one more time. Click on it and once again, this is referring to that object. So, you have lots of different ways. You can call the method manually. You could use the call or apply methods, and those are JavaScript-based, so they have nothing to do with jQuery. They simply work in Vanilla JavaScript. Or, we can take advantage of jQuery.proxy to state exactly what should be treated as this. So, hopefully that clears up some of the confusion around the this keyword.