this Keyword

[00:00:00]
>> Will Sentance: One of the bonuses I want to give you before as I say we moved to solution three. Which is gonna be the big next prettifying and simplifying of all this object creation. One more bonus thing I want to give you which is this. Declaring and calling a new function inside our method increment.

[00:00:16]
Let me just clear away the stuff we added there so we don't get confused. Let's just get rid of these bonus pieces here. So at the bottom there you can see, I'm calling the increment function, as before, this is the same code. The only thing I've changed here, folk, is I've put the increment method as the only method in the user function store.

[00:00:39]
And I've just defined it over lines, so that we can add something extra in there. Is that right, is that actually what I've done? I hope it is, I think it is right hopefully. So now we only have our increment function in here. But that's just for simplicity's sake, so we can do something inside of it, there we go.

[00:01:00]
>> Will Sentance: John's not liking my bad erasing of the board. Okay, there's our increment method being called on user1, via the proto link, yep, all good? It does this.score++? I just put it now on to slightly spread it out because I want to do this, I want to inside of the increment method.

[00:01:25]
Because if you start thinking in this style of writing code, you'll find yourself all the time, having to, in that increment method. A bunch of code maybe 10 lines, 12 lines, and you may not want to have that just 12 lines [SOUND]. You may wanna break that into little mini-functions inside of the increment methods, only one line, it may be 12 lines.

[00:01:44]
And you wanna define inside of them, some functions that you may even end up running inside of increment. Which you're probably gonna still wanna use user1. That's gonna create some interesting and intriguing challenges, let's have a look. I'm gonna keep this super simple and we're literally just going to wrap up the this.score++ in a function.

[00:02:08]
And then run that function right there and then. Because I wanna make a point, but it's gonna be exactly the same, have a look at that. I put this.score++, take a look, inside of a function I'm calling it right there. Put it inside, add 1, and I'm calling it right there.

[00:02:21]
Obviously I'd never really do this in practice, but I wanna make a point. But in reality we're often creating little functions inside of our method that's being called on our object. And this is going to be really interesting here. So let's get back to our bottom line here user1.increment, let's call user1.increment.

[00:02:43]
Apparently not much has changed. I've just put my this.score++ into a little baby function inside of here, that I'm gonna immediately run. And, people, these are just bonus things I wanna show you around the ecosystem of the prototype world and the this keyword. So there we go, let's run our user1.increment, Braden, brand new?

[00:03:04]
>> Braden: Execution context.
>> Will Sentance: Execution context, exactly, there it is, into it we go. First thing, Braden, in local memory, what's our implicit parameter immediately? This, yeah, assigned what? User1 whatever's left, so that's good, because you wanna do some code on user1 and change the score, the user1.
>> Will Sentance: What's the next thing we do inside of the increment core?

[00:03:34]
>> Braden: Declare a function add1.
>> Will Sentance: Excellent, add1, there it is, function add1.
>> Will Sentance: What do we do then immediately, Braden?
>> Braden: Run the function.
>> Will Sentance: We call the function, we run the function, we invoke the function, they all mean the same thing. Brand new what, Braden?
>> Braden: Execution context.

[00:03:53]
>> Will Sentance: Execution context, exactly.
>> Will Sentance: Now things get interesting.
>> Will Sentance: What's the line of code inside?
>> Braden: This-
>> Will Sentance: Well, the line of code-
>> Braden: The line of code would be this.score++.
>> Will Sentance: This.score.
>> Will Sentance: ++.
>> Will Sentance: What [LAUGH] is our value of this inside add1's local memory? Presumably it's user1 cuz we are inside this function, what do we think, everybody?

[00:04:27]
That makes sense, every other language does that! What, Braden, do you think it's that?
>> Braden: No.
>> Will Sentance: No, [LAUGH], glories!
>> Braden: [LAUGH]
>> Will Sentance: Yes, so this is one of those arguably, maybe not the best earlier implementations of JavaScript. Especially as in other languages it's absolutely standard that while you're inside the method.

[00:04:46]
The pertinent object, the object that we care about doing stuff to with the data. Is throughout, going to be the object that we're running the method on. Even if we declare other functions inside and run them, they're this in their local memory. But no, the this in the local memory here, Braden, you wanna take a guess what it refers to?

[00:05:07]
>> [SOUND]
>> Will Sentance: What's our default for the this? Yeah, Dan?
>> Dan: The global memory.
>> Will Sentance: Well, the global window object, especially not useful at this moment. And so we'd end up attaching to this funny global object called window, a property on it, a score. Which would then be undefined by default, and we'd try and increment it.

[00:05:30]
[SOUND] beautiful, well, that's one of those glorious bugs. Not a bug, it's just like, I guess if we know how it's working, it's not gonna happen. So in the old days, how was this dealt with, it was a funny way.
>> Dan: [LAUGH]
>> Will Sentance: They used to, do you know this, everybody?

[00:05:47]
They used to do this, they used to do that, they used to do that=this. Which would set that equal to this user1, beautiful. And then inside of here, we wouldn't write this.score ++, what would we do?
>> Dan: That.
>> Will Sentance: That.score ++, we'd look for that in local memory, it ain't there.

[00:06:10]
So we go out here and grab user1, no problem [SOUND] no problem. You'd see that=this inside many of these functions throughout the code. It wasn't the most beautiful design path, and I've gotta say. There are other ways of doing it, you can actually run the add1 function, we're putting parents on the end.

[00:06:27]
But also, there's some manual ways to run the function, does anyone know the manual ways, yeah, Kayla?
>> Kayla: Call or reply.
>> Will Sentance: Call or reply, or bind, exactly, well, bind is gonna do something very close. Call and reply, we're gonna go into this more in the OOP hard parts.

[00:06:42]
If you wanna go watch that, the deep dive, what we have, you can. But just quickly add1.cool, actually, I probably might as well show you right now, add1. Let's get rid of, by the way that was very standard that that.this thing, amazing. I don't think it was inherently terrible, it's kind of know it's pretty dumb.

[00:07:03]
But there is another way as I say of running the add1 function. Manually where we actually get to take control of what the this assignment is inside of it. That's kinda cool, and that is by running it using the cool or apply. For this bit, they both do the same thing.

[00:07:21]
And if I've passed in here, this, then whatever I pass in, the this will evaluate to what, everybody?
>> Braden: User1.
>> Will Sentance: User1, and therefore the this inside of here will be set to that-
>> Braden: User1.
>> Will Sentance: User1, and then it works again.