Check out a free preview of the full The Hard Parts of Object Oriented JavaScript course

The "Creating a Subclass with a Constructor" Lesson is part of the full, The Hard Parts of Object Oriented JavaScript course featured in this preview video. Here's what you'd learn in this lesson:

WIll diagrams a solution that uses the new keyword, but then also uses a prototype chain to grant an object access to certain classes, while another doesn't.

Preview
Close

Transcript from the "Creating a Subclass with a Constructor" Lesson

[00:00:00]
>> Will Sentance: Now we need to see if we can create, still using the new keyword approach, a paid user. Paid User 1.
>> Will Sentance: This is potentially a little bit tough. Because, we're gonna have a new keyword be like a hammer to hit, you know when you use a hammer for any task.

[00:00:23]
That new keyword only does one thing. Inside of paid user creator, it's gonna create an empty object automatically with a label this, that's gonna link to the proto whatever the paid user creator is. Sorry proto of the paid user creator.prototype. And then it's gonna return that object out.

[00:00:39]
That's pretty like [SOUND]. It's gonna do that whatever happens. If we use a new keyword on paid user creator, that's what it's gonna do. So we're gonna have to be really smart as to how we use that, and still get to reuse the user creation code. And have them work together.

[00:00:56]
Cuz there's gonna be a little bit comment. And that's why we take control again with the help of cool. That allows us to take control of our this assignment inside a user creator. Cuz we're gonna use that user creator code again. I do not want to have to, write code to re-assign name and score inside a paid user creator and usually it wouldn't be two properties from user, I'm grabbing fifty properties.

[00:01:22]
I don't want to re-sit them all on there again. I want to user creator function to add those properties, but it's gonna be a bit messy. Because that user creator function required a new key word that created an object, but we're using the new key word over here that's creating a different object.

[00:01:38]
So how do these two gonna work together? Well, what we're going to do, is we're not even going to use user creator with the new keyword. It's really, really it's, it's really interesting. We're not even use user creator with a new keyword, we're gonna use user creator independent of it.

[00:01:55]
Well, then what the hell does this refer to? Don't panic, we're gonna use it with the call. That's gonna set this inside the user creator, to be the this that was the auto created object in paid user creator. They're not gonna be different objects, we're gonna use this one in user creator, and have it indirectly be mutated from within user creator.

[00:02:16]
It is one of the most intricate, finicky little pieces of all of JavaScript. But we're gonna play it out. So, let's go to the right-hand side of our code, still the same application, still the same run time. It's sort of continuing over, and Michael top right-hand side, what are we doing?

[00:02:39]
>> Michael: Creating a function called paid user creator.
>> Will Sentance: Paid user Creator, which is a function. Who wants to give me the full story of what this function is? Cuz we know we're gonna be calling the creator with a new keyword. So we know that when it's called, it's gonna make reference to some of the function in its object format.

[00:02:59]
So someone give me the, sort of the full piece we're doing in, Terry, you wanna tell me when I declare page user creator, what else is happening? It's a function plus?
>> Terry: An object.
>> Will Sentance: Plus an object, beautiful man, there it is. There's the object portion. Which on the object portion has automatically what property,Terry?

[00:03:20]
>> Terry: This?
>> Will Sentance: [LAUGH]
>> Terry: A prototype.
>> Will Sentance: Prototype, well done man, prototype, which is a big old empty object. Where, any objects that get returned from running paid user creator with a new keyword. Will also automatically have their proto-bond be set to link to that object. So let's put our functions in there, that we won't Paid User 1, Paid User 2, Paid User 50, to all have access to that object.

[00:03:58]
We hope we're gonna do that. So let's see if we do. Paid user creator .prototype, we want this object, this object is gonna be linked to by any object, pages of 1, pages of 2, pages of 50, that come out of running, paid user/creator with a new keyword.

[00:04:20]
They're gonna have their protobond to this object. So we want to put in that object and I kinda want to do it first. I'm not sure why I did. That's why it's a little bit silly the way I did this but it's okay. We want that object to also have its protobond be up to these functions.

[00:04:36]
Remember that from last time? So that we have access to the specific paid user functions like increase balance, but also still to all the regular use functions. So how do we make that bond? David I asked you this last time, what do I need to add to this object to have it have a link up to these functions?

[00:04:54]
What does this object need to have to have a link up to these functions.
>> David: Proto.
>> Will Sentance: Proto spot on, a hidden proto property which would link up. But how do I set its proto? Well actually, I can just use set prototype all, can't I? But for some reason, I decided to do it this way.

[00:05:10]
Which was to completely overwrite the object. I'm going to change this cuz, but it's fine. Both illegitimate, but to completely overwritethe object, prototype object and seek a brand new object in there, right? I'll do that create return out of brand new of the object, which has it's proto set to.

[00:05:27]
>> Michael: The user creator prototype.
>> Will Sentance: Exactly, there it is, and that then links up to, and that means this object here is ready to go, ready to go to link up here, that's fantastic, all right. Good, and now, we wanna make sure that this object has its Paid user specific function.

[00:05:50]
Seth, tell me what we'll do on our next line here. Paid user created.prototype.increaseBalance. Tell me what we do.
>> Michael: Adding a method called increaseBalance to the prototype object on paid user creator.
>> Will Sentance: Yeah, excellent man.
>> Will Sentance: Okay, now we've done all our setup here. There it all is.

[00:06:11]
We have a function that we call the new keyword pages of creator. Hopefully it returns out an object, we saw in pages one. And that object, because this function is gonna be called the new keyword is hopefully gonna have a bond to the pages creator prototype where we find increased balance.

[00:06:27]
>> Will Sentance: And then that is gonna still have a bond up to user created dot prototype. So that these functions are all available to our pages of one. But, so that our user1 still only has access to our user only functions.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now