Creating a Subclass with extends

[00:00:00]
>> Will Sentance: We are now able to generate an object that does not have functions on it. And user 2 would be very similar, again, with the specific data for user 2, but no functions copied on it, but they're still available. This would be it. It'd be pretty nice, but we wanna produce a paid user that is just like a user.

[00:00:20]
But a little bit more specific. It has some bonus functions or it says here has some bonus properties, but also some bonus functions that are gonna work on those bonus properties, perfect. Let's see if we can do it. Right hand side here, here we go. Here we go, I'm just putting this here to show me what the right hand side.

[00:00:47]
Who should I call on? David, excellent help me out David. We declare a class which is really a function object combo. Give me a second while I put it on here, name paid use creator, hold on, paid user creator which is a function plus an object. Hold on.

[00:01:20]
Hold on, yeah, the extends bit. Shit, okay.
>> Speaker 2: [LAUGH]
>> Will Sentance: Now, it get's interesting. I'm gonna use a different colored pen for everything that extends does. Okay.
>> Will Sentance: Ain't got many pens left at this point. Thank you ma'am. Should I use orange? Yeah. I shall only use red.

[00:01:43]
Yes, I quite like that sort of complimentary to the pink for class. I use red for everything that extends is going to do.
>> Will Sentance: Okay, first let's just get the regular stuff. So it's a function object combo, so it's function is subtitled, constructor, there it is, and it has a property on its object portion, prototype, we know this is our regular stuff, which is itself an object, into which we're going to stick what function, David?

[00:02:23]
>> Speaker 2: Increase balance.
>> Will Sentance: Increase balance. And that's done for us now rather than having to manually assign it there. It's just done by putting it in the class structure is the function. Okay, so what does extends do? Extends user creator. Is going to do two major things. We want any object that comes out of running paid user creator, which will be paid user one.

[00:02:54]
We want that paid user one to have a bond to this set of functions. Well, that makes sense. We know that, that's gonna happen by using new keyword, running pages create. It'll get a bond automatically to this set of functions in the proto reference. No problem. But we want that, we want that object to also have access to this set of functions.

[00:03:13]
So what, when it goes looking in here for say name, do we want to happen, Seth? When that object doesn't even say name in here, doesn't find it and we wanted to go looking?
>> Speaker 3: It's proto link should link up to it.
>> Will Sentance: Perfect, red means extends does it?

[00:03:25]
So the first thing extends does is set that proto as reference up to user-creator- dot-prototype. No problem. We did it manually before dot-prototype. We did it manually before, if you remember. Using the greater prototypes setting the object on the prototype, replacing the whole object and making it have a link to its proto up to that user creator prototype.

[00:03:56]
We did manually before. Now, it extends it for us. It extends, automates it for us and the bond is made up to there. With the help extends, but extends does something else. We want to, when we run page user creator with a new keyword, we want to run the constructor portion, that we then want it to use the work we did earlier of assigning properties in user creator, is to use that to help create the object with the right properties on it.

[00:04:38]
Now, remember we did that earlier. We used user creator with call, and then we assigned it this. We ain't gonna need to do that anymore. Now inside of the function, the constructor bit, that when we run paid user creator, create our object with the help of the new keyword, we're gonna run super, and super is gonna say go run the user creator bit.

[00:05:04]
It's gonna be a little bit finicky how it does it. We're gonna see in a second. The spec explains it. I've only ever seen my favorite 2ality explain it explicitly. Otherwise no one else explains.
>> Will Sentance: The super is gonna go and take us over to the user creator and run it's function to create our object.

[00:05:24]
And by the way, unlike here, when we made the object inside pages creator, and then we mutated it one layer out, we're actually gonna make the object, wait for this. We're gonna make the object inside of user creator. But it's gonna have its proto auto-set to pages creator's functions.

[00:05:43]
We'll see in a second. But that means there's one other thing that extends does, I can't.
>> Will Sentance: I'm not sure I should even tell this, okay, it does this, it does this, it does this. It sets paid user creator, the function.
>> Will Sentance: It's proto.
>> Will Sentance: To the user creator function object combo.

[00:06:20]
To user creator, let me just extend this down a bit here. It's a joke. That's true. No, no. No, please please don't all off at once at my drink, okay as extended down slightly. The second thing it does is we have another property on pages of creator. Proto that normally would just link to function-dot-prototype, where all the shared, anything that a function has access to will be.

[00:06:52]
This is the moment where we go, a-ha, and just give up. But it links up to user creator. We're gonna see what this is gonna let us do, people. Is that when we run paid user creator, the function, it's gonna create us an object inside. We're gonna call super, and that super is gonna go.

[00:07:12]
What am I? What do I need to go and run? It's gonna go look at proto, see user creator and go and run it. Creator object. I promise we're gonna do it in a second Seth, I really wanna dive into this piece.
>> Speaker 4: Okay I kinda wanna extend on this piece a little bit.

[00:07:28]
So if you left off constructor on paid user creator, it's gonna look in proto for constructor, and just run constructor directly.
>> Will Sentance: That's a different factor, if you leave off constructor it's gonna automatically put in a very simple constructor that just returns and object. So look, my God.

[00:07:43]
Look at what our sub. They call this a subclass, right? So not a base class, but a subclass. Look at what it has on it. Is that just from? That was just from. And everything in red was added by extends. One portion ensures that the objects that come out of running this function have access to these functions.

[00:08:04]
That's what the proto bit on the collection of functions ensures. The other portion, the other consequence of extends ensures that the super, which when we run page as a creator, we're going to run makes us go and run user creator to make the object there. And that link is stored in the proto.

[00:08:25]
That is where it's stored. If you overwrite proto, then the super goes [SOUND] I'm not there anymore. When you call super inside of that it is absolutely heading to proto and going to look up here. So if you overwrite this with null that super ain't gonna do anything.

[00:08:43]
Okay, let's see it play out. This is a lot of laying out, we're gonna see it play out, and that should become a little bit clearer. All right, left-hand side here Chris, what are we doing? We've set up our whole paid user class, with it is an extension of user creator, now we're gonna declare what?

[00:08:59]
>> Speaker 2: A constant of paid user.
>> Will Sentance: Yeah perfect of paid-
>> Speaker 2: User one.
>> Will Sentance: User one, which we don't initialize anything yet, while we go off and call.
>> Speaker 2: Paid user creator.
>> Will Sentance: Paid user creator.