this

[00:00:02]
>> Kyle Simpson: The third and final pillar of JavaScript that we wanna focus on in this course is the this and the prototypes system. They fit very closely together, they're not actually really very separatable, so they're one unit that we want to talk about. The this keyword, and then the prototype system.

[00:00:18]
And actually, what you're more likely to encounter in modern JavaScript code is that the prototype system is what the class keyword is built on top of. So I'm gonna take a look at this prototypes, and then we'll finish by looking at the class keyword. Let's take a look first at the this keyword.

[00:00:35]
A function's this keyword, you've undoubtedly probably seen a function with a this keyword in front of it. That this keyword references what we would call an execution context for when that function gets called. I want to stop right there and just point out, it's all about the call, it's not about the definition of the function, it's not where the function is, it's not what the function belongs to, none of that matters.

[00:00:58]
It's only how the function was called, that determines where the this keyword is pointing at. It's determined entirely by how that function was called. And that this-aware function can actually have different contexts. So if you define a function once and you call it in a bunch of different ways, it's gonna end up having different this keywords every time it's called, and that is what we would call a dynamic context.

[00:01:25]
That gives us much more flexibility. Instead of having a function like with when we talked about lexical scope and closure, it's very fixed and it remembers it the same for ever. Well, a dynamic context means that we can change, use the same function but change what context it is, based upon how we call the function.

[00:01:42]
That makes it much more flexible and reusable. It's a really powerful, and I think, underappreciated part of the JavaScript language. So let's take a look at an example of using the this keyword inside of some this-aware functions. Here I've got a workshop object with a property on it called teacher, and then a method called ask.

[00:02:02]
And that method has a this keyword in it, so that makes it a this-aware function because there’s a this keyword there that makes it a this-aware function, and that means that to determine what the this keyword is going to point at, we don’t need to look at lines one through six.

[00:02:18]
None of those lines are going to determine anything about the this keyword. It is only line eight that is going to determine what the this keyword is pointing at. And in particular, we have a set of rules, there's actually four rules that determine how a function's call determines what it's this keyword for that call, what this key word is going to point at.

[00:02:38]
And this is one of those rules, which we would call the implicit binding rule. It means that at the place where the function is called down on line eight, you'll notice that there is a workshop object in front of the reference to the .ask method. So it says workshop.ask.

[00:02:56]
That's an implicit binding of the workshop as the this keyword. So on line 4, when have a this keyword, for that particular invocation of the function, it's gonna point at workshop, which is why when it says this.teacher, it's gonna end up pulling out the name Kyle instead of undefined or some other value.

[00:03:17]
So it was entirely based upon line eight, it was not that ask was inside of a workshop object, it was just that the way we called on line 8, allowed that function ask to use workshop as its this context. We can actually change, we can have a function that is in one place, and change what this context it uses, based upon its call site.

[00:03:41]
So here's another example. I have an ask function, line 1, that is this aware. You see that this keyword on line 2, it's a this aware function. It doesn't have any object that it's wrapped around, so there's no obvious this context for it to adopt, and that's because the this context is gonna be entirely determined by how we call it.

[00:04:02]
Well, we're gonna call it on line 9, and that's gonna determine what the this keyword is gonna point at. Lines 6, 7 and 8, I make an object called myContext, with the teacher of value Suzy. And on line 9, I say ask.call. That's another way of invoking a function that tells it, invoke that function ask and use, as you see on line 9, the myContext object as the this keyword.

[00:04:28]
So when it says this teacher it's going to find myContext as that value and then it's going to pull out teacher with the value Susie. So teacher then points at the teacher that we defined in the myContext object on line 7. So that’s another way invoking a function.

[00:04:47]
Line 9, when we say a .call on a method, instead of saying workshop or myContext.ask, here we just said ask.call, and we gave it an object to use for the this keyword. That’s called an explicit binding. In both cases, we're providing a dynamic context to this function, and if we were to do so in five different other places of the program, we could end up getting each one of those invocations using a different this keyword.

[00:05:15]
That's the flexibility that I'm talking about. It's one function that can be reused against a lot of different contexts. It makes it extremely much more powerful.