Using a call Method in a Constructor

[00:00:00]
>> Will Sentance: Okay. Let's get creating pages of one. Here we go. Susie, left hand side. You're on const page user1. What is that telling us to do, Susie?
>> Speaker 2: Const user1 we're using-
>> Will Sentance: Declaring
>> Speaker 2: Or, declaring
>> Will Sentance: Declaring pages of one. Exactly. Excellent, and then on the right hand side, we declared pages of one.

[00:00:23]
We're saying, invoke call, execute what function?
>> Speaker 2: Paid User Creator?
>> Will Sentance: Spot on. Excellent. Okay, so let's do that. Paid user1 will be the return value of calling Paid User Creator function. My goodness. We're almost there. Paid user creator function with which arguments again Susie?
>> Speaker 2: Has the arguments of Alyssa?

[00:00:52]
>> Will Sentance: Yep.
>> Speaker 2: And a score of 8, and account balance of 25.
>> Will Sentance: Raise her much Susie? Let's create that, well that's what he was going to reinvigorate everybody. I promise you. We actually need a function so we create a brand new.
>> Speaker 3: Execution.
>> Will Sentance: Okay, Seth new configuration is Terry, Nick, David?

[00:01:15]
Situp. We're gonna create a brand new?
>> Speaker 3: Execution context.
>> Will Sentance: Michael.
>> Speaker 3: [LAUGH]
>> Michael: Sorry.
>> Will Sentance: Michael.
>> Michael: I was there in spirit.
>> Speaker 2: [LAUGH]
>> Speaker 5: He was watching your last talk.
>> Will Sentance: [LAUGH] Catching up at last. All right, Michael, we create a new?
>> Michael: Execution context.
>> Will Sentance: Execution context, beautiful.

[00:01:38]
Thank you, man. All right, let's create it, there it is. Let's make it as big as possible cuz I'm gonna need a lot of room for this one. That's probably still not quite big enough. Let's make it slightly. Okay, there it is. Into it we go. First thing's Nick, help me out with the local memory, this is sort of the bit we know and love, what's in the local memory first?

[00:02:02]
>> Nick: Local memory has the parameter.
>> Will Sentance: Parameter which one?
>> Nick: Paid name.
>> Will Sentance: Paid name which is?
>> Nick: Which is Alyssa.
>> Will Sentance: Good old Alyssa yep paid?
>> Nick: Paid score which is 8, and account balance which is 25.
>> Will Sentance: Yep account balance, which is 20. Account balance, 25.

[00:02:29]
>> Nick: And then.
>> Will Sentance: Ah-ha.
>> Nick: It all, since it was declared with the new keyword.
>> Will Sentance: Thank you man, you go ahead of me there, I forgot, yeah. First thing is the first thing the new keyword does is what?
>> Nick: Sets the this object.
>> Will Sentance: Fantastic, man. Here it is.

[00:02:42]
This is a big old empty object. By the way, when I say, big old empty object, that does not mean. [LAUGH] It is an empty object. But it's an empty object that's ready for stuff to be put in. I know I called object, but that's clearly unclear.
>> Will Sentance: And that big empty object's got a-

[00:03:03]
>> Nick: Proto.
>> Will Sentance: Proto, hidden proto property, too. Where are we creating this object, with a new keyword? In the call to pageUserCreator, and so that proto link is to.
>> Nick: The prototype of paid user creator.
>> Will Sentance: Yes, spot on. And that's just, by the way folks, that is just what the new key word does.

[00:03:25]
Because we need a place to put the functions we want this object to have access to and the place, the new key word automatically puts those functions is, the name of the function that's got the new key word running it? Creating the object automatically, .prototype that means on that function's object version and its function object combo.

[00:03:45]
And then that is an object, and that's where we put our functions, which is what we just did paid user prototype increase balance. Okay, so that bond is made automatically to this object, perfect. Know that that object then has a bond automatically. Not automatically. We made it, right?

[00:04:04]
With that object.create. Rebuild this object with its bond up to another set of functions. Meaning this object, if we go looking on it for increased balance, no problem. Linked, we go looking on it for say name, still no problem. [SOUND] linked, indirectly through two steps. Okay, now we get to the really interesting part.

[00:04:34]
So the proto is set. Okay, now we get to the really interesting part. Who feels they want to give a shot at one of the hardest parts? Seth?
>> Will Sentance: You've got the job locked down at this point. We hit the body of paid user create a call, and we start.

[00:04:52]
>> Speaker 7: We look up the user creator on the global context.
>> Will Sentance: Yep, there it is. Okay, give me a second. I just want to write this up. User creator. So we grab the function's code. And what are we gonna call it? We're not gonna go looking for the cool thing right now.

[00:05:05]
It's there. [LAUGH] We can assume cool is there. We are not going off the functional prototype. It's there.
>> Speaker 8: We get call off of it.
>> Will Sentance: Yeah, we get call somehow.
>> Speaker 8: We pass in the autocreated this object.
>> Will Sentance: Okay, give me a second here, mate, because this is so demanding, I think.

[00:05:18]
So let's create that execution concept for it. Okay.
>> Speaker 9: You pass in three arguments.
>> Will Sentance: Yeah, and the first one to call is always whatever the keyword this inside this function is gonna be set to. Now brutally, the keyword this inside of the function, let's just put it in.

[00:05:37]
Local memory, the keyword this is going to be set to.
>> Speaker 9: Until we call.
>> Will Sentance: Yeah the keyword this, wait hold on, so we're gonna call it the keyword this inside of user creator, and look at how user creator normally we call it the new keyword. So normally, the key word this inside this creator is set to that new auto created object, but here, we control it with saying, when we pass in, what is the this?

[00:06:09]
Well, the this is this object, and we're going to [SOUND] throw it in, there it is. And this object, now we're not actually copying him people, we're just referring to it one layer. So I'm actually going to, I'm actually, I don't know maybe it needs a black line here.

[00:06:27]
It's going to refer to this object. That I think is the most puzzling little bit, no puzzling, but intricate bit of JavaScript. We're calling the user create a function. We're not calling it directly the parens. We're not calling with a new keyword, it should have a new keyword right?

[00:06:44]
That's where this is gonna refer to the auto created object. But we're gonna say nah nah nah we don't want it to refer to a different auto created object we want it to refer to this object. So we can add properties to it in as the object that's gonna be the paid user, into paid user one.

[00:07:02]
So we want to use this object that when we run pages creator with the new keyword, we automatically get that object created, as Nick said, by the help of the new keyword. We want to use the property sticking on code from user creator, which sticks on the name, sticks on the score, then use that code, but not stick it on an auto created object in here, because that object's different to that object.

[00:07:30]
So instead we want the this in here, to refer to the object one layer out that is our auto created object, that is gonna be our paid user1. That comes out of running paid user creator with a new keyword. So now this as is by design, do not look at the this in the argument to call as.

[00:07:53]
Do not get confused, and that's the parameter. The parameter, or the implicit parameter, we'll make it explicit, here, is this. And that's the value of this, inside User Creator. And we are saying that the value of this, inside, is gonna be the value of this, outside. Okay, I'm just gonna do this one more time to make sure we see it in different angles.

[00:08:18]
I think this is the most intricate, finicky line in JavaScript. We're calling paid userCreator,
>> Will Sentance: With a new keyword. Because we want to create an object that's gonna end up being sorted in paid user1. But we want it to have access to paid user specific functions great. But we also wanted to have properties that users had.

[00:08:43]
But we don't want to have to go and recode those properties for paid user so instead we use the user creator's code. But the user creator's code was designed to be called with a new keyword and has got the this to stick it on that object. But we don't wanna call user creator, create a new local object that is definitely different to the object that paid user creator auto created for us.

[00:09:06]
No, no, no, no. We want to have the ability to use the user created code, do the this.name is equal to whatever name is, but have the this be the very object in pages creator that we want to add stuff to. That we want to add the properties to.

[00:09:26]
The way we do that is we use call. That allows us to run user creator and take control of what the this inside of user creator is gonna be. And how do we take control of it, by using call whose first input becomes the value of this inside of user creator.

[00:09:50]
It looks specially confusing because what we're passing in is called this but it's not saying this it's the object we made earlier the value of this in paid user creator is then passed in and becomes a value of this inside of user creator. But it's brutal right there different.

[00:10:08]
The this were passing in doesn't get passed in as a word this it evaluates. When JavaScript sees user-created up call passing this it goes? What is this and goes and look old. It's this blue object here. There was created automatically in pages created with the help of the new keyword as Nick said.

[00:10:25]
And it takes that object, and it links out to it as the reference for the this inside of user creator. Can I get thumbs on that, cuz I think that is really, really demanding. Terry?
>> Terry: So the this in this case happens to be this that goes over a level.

[00:10:44]
>> Will Sentance: Yeah.
>> Terry: It wouldn't have to be.
>> Will Sentance: We could pass any object we want. It will then always, that object, be referred to inside user creator by this. And then here, it's referring out to this one layer out. But JavaScript doesn't pass it in as a label this, it says pass in this.

[00:11:04]
When I'm in page user create, what the hell is this? It's this object here. And it literally grabs that object and passes in a reference to it, with the proto and like that's what's being passed in so we end up just love this inside of user creator referring to the object out here.