Using super in a subclass constructor

[00:00:00]
>> Will Sentance: Here we go, so super refers to lets go run userCreator just like we did before, go run use a creator, make the object, but before we use that previous work and applied it to the local object in paid userCreator. Now we're gonna make the object inside of userCreator, not inside of paid userCreator, and we're gonna return it out into paid userCreator.

[00:00:22]
Let's do it, and then we're done, people. So, calling super really calls userCreator, constructor function, let's have Nick, save me Nick. When calling super, it's really userCreator with a new keyword in front of it, its output is gonna be stored in our this, in paid userCreator, talk me through the execution context of userCreator with a new keyword.

[00:00:45]
Help me out, Nick.
>> Nick: So the new keyword-
>> Will Sentance: Let's just do our arguments first.
>> Nick: Argument, okay.
>> Will Sentance: So our arguments are?
>> Nick: Our arguments are name and score.
>> Will Sentance: Those are our parameters with the arguments.
>> Nick: With the arguments, Alyssa at 8.
>> Will Sentance: Alyssa is our argument, assigned to a parameter name and score, and then scores 8.

[00:01:07]
It's the being called with a new keyword because super is really calling userCreator the construct a bit with a new keyword to make the object, but note we making inside of here this time not out here, okay? So let's do the new keyword stuff. Go ahead.
>> Nick: So new creates this, an empty this object.

[00:01:26]
>> Will Sentance: Beautiful.
>> Nick: Which gets set with a proto-
>> Will Sentance: To where? Normally, it would be to userCreator.protoype, this object here, wouldn't it?
>> Nick: Yes.
>> Will Sentance: But by the nature of the cost design, the super sets this object's proto, not to the function userCreator.prototypes object. Instead, it overrides it.

[00:01:57]
And David, where does it set it to?
>> Nick: Page userCreator.
>> Will Sentance: Page userCreator.prototype, fantastic. And that's what I was regretting bringing up, but sort of showing you under the hood what's happening. It says run userCreator with a new keyword. Parse in these arguments and set the returned objects proto to pageuserCreator.prototype.

[00:02:15]
That's all this, this is a new way of doing something in JavaScript in ES6 that allows you to manually control more of what the new keyword does. That's all it was, but we can see without bringing that up but forgive me for bringing that up. It's interesting thing to see there's a new way of doing this stuff.

[00:02:31]
But yeah, we now set our proto, remind me again, Nick, to what?
>> Nick: Paid userCreator.
>> Will Sentance: Dot prototype. That object, yeah, exactly. Let's just draw the line through. It's a long way. Can I get my line? Almost, there it is, and that object is gonna have what properties added to it, Nick?

[00:02:51]
>> Nick: Name and score set to the values of Alyssa, and 8.
>> Will Sentance: Beautiful, name and score, this is our final, final code. It's great but it's stuck inside of, so 1 with this is the object, 2 was proto was set, but proto was set in a really interesting way.

[00:03:13]
I don't know, all right, and 3 is to do what, Nick?
>> Nick: It's returned to the constructor of paid userCreation.
>> Will Sentance: Fantastic, so its execution context in what local-
>> Nick: In one this object.
>> Will Sentance: In this, exactly. It goes and sticks in the this fantastic. But folk, it was even a revelation to me.

[00:03:34]
I say even, but probably especially a revelation to me. That is awful, I apologize. It was a revelation to me that the construction of the object itself, is happening in the userCreator constructor, and then getting returned out one level. Okay, where returned with name, Alyssa, score 8, and then proto is a bond, quite conveniently, I'll just join it on there.

[00:04:08]
>> Audience: [LAUGH]
>> Will Sentance: [LAUGH] Okay, let's just get rid of it from here, let's just say here it was up to here, there it is, and now we can see where it actually links. No, this is getting horrible, I regret this. Just gonna get my purple line.
>> Will Sentance: There we go, nice and tidy now.

[00:04:30]
There we go, and now what do we add to this object, Nick?
>> Nick: Now, we add increase balance?
>> Will Sentance: That was in our prototype easy slip to make.
>> Nick: Account balance.
>> Will Sentance: Account balance with what property value?
>> Nick: 25.
>> Will Sentance: 25, good. And to our last online member who's still with us, cuz they can leave the room anytime.

[00:04:57]
That is the blessing of being the online audience. Anytime they can leave the room going, it was good, next time.
>> Audience: [LAUGH]
>> Will Sentance: We grab this object, we're calling page userCreator with a new keyword, so Nick, we've got our lovely object here. In the this, what do we do to it automatically?

[00:05:18]
>> Nick: We return it to paid user1.
>> Will Sentance: To paid user1. Nick, I'm so impressed. Out it comes, there it is, into paid user1 where,
>> Will Sentance: We find, let me just get my handwriting really neat for this final piece. Where we find name, Seth, stop packing your stuff up.

[00:05:41]
>> Audience: [LAUGH]
>> Will Sentance: Shh, I can literally hear the zip of your bag, Seth.
>> Audience: [LAUGH]
>> Will Sentance: Okay? And the proto is conveniently set to exactly what we want. So here we go. Our final lookups. Our final lookups. I'm actually out of breath from so much excitement, excitement. All right, I really don't know why I brought up this version, but it should show you what the new keyword is really doing in this situation, it's slightly different here.

[00:06:20]
It's making the bond to a different portion, and that's actually what's happening behind the scenes. Although it's very cool when I saw that. Okay, so let's do our final lookups, remembering all we want is a paid user1 who has access to the paid user specific functionality, but also to the user functionality, and that paid user1 has the properties of a regular user, and we didn't have to go and redo the property assignment, we just used the constructor that made the regular user earlier.

[00:06:51]
And finally with the class model in the new ES6 version, you do the creation of that object in userCreator, and then return it out to paid userCreator. Which seems reasonable, but it is different to how we used to do it canonically in pre-ES6, pre-2015, where we built it out here and then had side effects to change it, using the previous constructor function.

[00:07:13]
Paid user1, you want that increased balance, let's call it, Elliot, it is your moment man.
>> Elliot: We look for a paid user1.
>> Will Sentance: Hold on, hold on, hold on, paid user1.increase balance, this is remember, the paid user specific functionality. Let's go on that lookup, Elliot.
>> Elliot: We look for the increase balance method.

[00:07:37]
>> Will Sentance: Yep.
>> Elliot: It's not there, so-
>> Will Sentance: We wouldn't want it to be there would we, cuz that would mean it'd copy you on every single object which would be ridiculous. So where do we look?
>> Elliot: We follow the proto to paid userCreator, prototype object and we find it there.

[00:07:48]
>> Will Sentance: Beautiful, let's see if he can do it for the other one. So that's the pages what and by the way user1 if we went looking for increased balance. We wouldn't find it on user1, but nor do we find on userCreated.prototype. So that's great, we don't want it.

[00:08:03]
The regular user didn't pay, so we don't want to have an increased balance. So, now let's check if our paid user1 though still gets access to our user specific functionality. Elliot, help me again on that look up journey.
>> Elliot: We look in the global memory, again, paid user1.

[00:08:23]
>> Will Sentance: Perfect there it is.
>> Elliot: Look for the method increase say name.
>> Will Sentance: Say name.
>> Elliot: It's not there so we follow the proto to-
>> Will Sentance: Hold up. Yep, so it's there, it's not there so we follow the proto reference up.
>> Elliot: To paid userCreator prototype object and it's not there so we follow that.

[00:08:39]
>> Will Sentance: Do we panic?
>> Elliot: No.
>> Will Sentance: A little bit.
>> Elliot: A little bit.
>> Will Sentance: But then no more and we follow it up to-
>> Elliot: The proto up to the userCreator prototype objects.
>> Will Sentance: And what do we find there?
>> Elliot: We find the say name.
>> Will Sentance: And we can execute its code.

[00:08:55]
Let's give Elliot a huge hand, well done man.
>> Audience: [APPLAUSE]
>> Will Sentance: That's it folk, that is it. We have implemented, from scratch, under the hood, solution 2 of sub-classing. And you can see, is brutal. But we have the full model of how it works. And we control every single piece of it by hand.

[00:09:20]
Which I like this. I know exactly what I'm doing here. I know what my functions are, I'm manually setting bonds to them, no problem. Then we said new keyword. Do some of that connecting up automatically. And you know what, we ended up doing some sort of weird connecting up, meaning we had to kind of use that function over there, userCreator.

[00:09:41]
And we wanted to use it but we had to kind of play with it by setting the this to be the this one there out in paid userCreator, so that it referred to the right object that we were making for a paid user. That was a little bit of a mess, sorry David, go ahead.

[00:09:55]
>> David: And then update proto.
>> Will Sentance: And then update proto. That was a little bit mess, well, we update proto, exactly, update proto on the paid userCreator's set of functions so that they had a link to the userCreator's set of functions, the user functions. It's a little bit, I mean this was the emerging standard until ES 2015.

[00:10:16]
And I can tell you it's a little bit [SOUND], I don't know. It's a little bit, almost hackey, not literally, but just it kinda gives you some stuff and then takes away. It gives you some stuff and too much, and you have to kinda do adjustments.