The this Keyword

[00:00:00]
>> Kyle Simpson: So let's dive in. We're gonna talk about the this keyword, and the this keyword is maybe the most perpetually confused of all the JavaScript features. I would imagine if we polled everyone here, or watching online, or watching this at a later time, you've almost certainly been frustrated by this keyword at some point in your JavaScript career.

[00:00:23]
Which is sad because it's a very powerful mechanism, and it's also sad because it didn't have to be that way. It didn't have to be that this would be confusing to us, but I think a lot of people got confused by the this keyword. Simply because no one ever told them stop trying to make it like this keyword in other languages.

[00:00:42]
So I think it's important for us to set aside how these things work in other languages. Not that those are unimportant context, but to the extent that it helps you great. But to the extent that some other languages behavior holds you back, and makes it so it's harder for you to understand or leverage JavaScript.

[00:01:03]
That is baggage that you should leave at the door, and focus more specifically on what is JavaScript do? Well it turns out that this key word is actually a bit more straightforward than you would imagine. It's more powerful than you would imagine, and it's just been explained and taught incorrectly.

[00:01:21]
So we're gonna bring some clarity to this topic. A function's this represents or references an execution context for that call. A context in which that call was being made. And that is determined entirely by how the function is called. In other words, that this key word assignment, if you look at a function that has this keyword in it, it is assigned based upon how the function is called.

[00:01:52]
Which is the counterintuitive part because most people think that you could look at a function, and figure out what this keyword is gonna point out. But the definition of the function doesn't matter at all, to determining the this keyword. The only thing that matters is how does that function get invoked?

[00:02:13]
>> Kyle Simpson: If that sounds familiar to you, it's because we've sort of already talked about a flexible reusable context. It was what we talk about when we talk about dynamic scoping, and the scope you need of our discussion. So in other words, that these keyword is JavaScript's version of dynamic scope if it's this way of having as flexible, reusable behavior.

[00:02:38]
So here I have a function that is this aware, or I'm sorry, I don't have a function that is this aware. But you remember that I have a function that in a dynamic scope dynamically context aware. So instead of asking teacher to get the teacher, on line 4, when it references teacher, instead of trying to line 1 to get teacher, it goes to line 8.

[00:03:02]
Because ask was called from line 10 it was called from the other class scope, that's what dynamic scope does. And in JavaScript we have something very similar, but it's not based upon scope boundaries, or where something's called from, it's based on how the function was called. And that's how we're gonna end up resolving it.

[00:03:22]
So here I have a version of the ask function which is this aware, it uses a this keyword, so it's this aware. And you'll notice that I'm calling it from some other location but that doesn't matter. It's not where I call from, it's how I call it. If I use ask.call here, I am saying use this particular object as your this keyword, and invoke the function in that context.

[00:03:49]
So this keyword in this particular case, will end up pointing at my context. So you see that sort of dynamic flexibility happening here. You see that I could call that same ask function, lots of different ways. And provide lots of different context objects for the this keyword point on, that's the dynamic flexible reusability of the this keyword.

[00:04:12]
That's why it exists by the way, it exists so that we can invoke functions in these different contexts.
>> Kyle Simpson: So it turns out that there are four different ways to invoke a function. That might come as news to you, because you might be used to thinking about functions as only being invoked in one way.

[00:04:37]
In JavaScript there are four different ways to do so, and each one of them is gonna answer the question, what is the this keyword differently? So we just need to learn those four ways. This keyword conceptually if you can recall from our discussion, the metaphor of the building.

[00:04:53]
In lexical scope land, we start at the current scope, and work our way up to the global scope. Well here we are gonna have a different building involved. We're gonna start our way, we're gonna to start at the bottom of a building. But the real question is, which building?

[00:05:09]
If somebody asked you to meet them for lunch tomorrow, and they said come meet me in office 317, your natural first question is gonna be, but what building? Cause there's lots of office 317's in my city. So we need to understand which particular context we're talking about before we understand how we look for things in that context.

[00:05:32]
And the which building question is what our this keyword rules are gonna tell us.