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

The "Creating an object with a subclass" 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:

The last execution context of the course is instantiated, and a paidUser is created using the new keyword. Will also briefly covers reflect.construct(), which acts like the new keyword, but as a function.

Preview
Close

Transcript from the "Creating an object with a subclass" Lesson

[00:00:00]
>> Will Sentance: Are you ready for this? I'm ready for this. This is our final code fork paidUser1, it's actually getting dark, this is a very bad sign. Okay, this is our final code, we're down to our final, final, final code. This is our final execution concept we're gonna do tonight.

[00:00:16]
Sorry, let's pretend today, all right? PaidUser1, let's pretend for ourselves that it's still today. Code with that mutative, that powerful new keyword, call paidUserCreator. Pass in, Alyssa 8 and 25. Okay here it goes, big execution context.
>> Will Sentance: There it is. Into it we go, and the first thing.

[00:00:58]
Do I have enough room there? Hold up.
>> Will Sentance: The first thing in local memory,
>> Will Sentance: Are our argument parameter combos. Let's have Michael help us out with those. We're calling pages creator, that means we run the pages creator function, which happens to now be called constructor as part of a class.

[00:01:21]
But it is just the function here. And that says we're accepting paidName, paidScore account balance. So talk me through the parameter argument matching here.
>> Speaker 2: Yeah, so we're gonna have paidName equal to Allysa.
>> Will Sentance: Beautiful.
>> Speaker 2: And then paidScore equal to 8.
>> Will Sentance: Yeah.
>> Speaker 2: And then accountBalance 25.

[00:01:44]
>> Will Sentance: 25, okay. Michael thank you man. And now, we call it with the new keyword, Nick this is your specialty area, what does this get us doing? I can help you out. I'm afraid this is not your specialty are this time. Because now in a class it does do something weird.

[00:02:06]
So there is a this assignment, but it is uninitialized, nothing there, okay?
>> Will Sentance: And we immediately must have a super call, before we want to refer to that this. It is there, it's uninitialized, but we cannot refer to it. It's not undefined, it's not going console.log above the super, which is hopefully gonna go and call the userCreator to create our underlying object.

[00:02:33]
We are not gonna run userCreator and have it indirect, sorry, have a side effect on the this we create with a new keyword here. No, this fundamentally changes, the class structure, how and where, our pertinent object, the one we're creating, the one that will eventually be sorting pages one is actually being born.

[00:02:53]
It is not being born in pagesCreator, it is actually gonna be born in userCreator. And that is a design decision of the JavaScript team, to make it be born in pagesCreator. Sorry, to make it be born in userCreator constructor function. It is born in there. And then it is automatically returned out and assigned to the this out here.

[00:03:17]
Versus remember in the previous version, we have side effects on the object we created here.
>> Will Sentance: Okay so let's start doing this. So it's unassigned or uninitialized right now. We call super with what arguments Chris?
>> Chris: PaidName parameter.
>> Will Sentance: Which is?
>> Chris: And paidScore.
>> Will Sentance: Which have what values?

[00:03:43]
>> Chris: Alyssa and 8.
>> Will Sentance: 8 and there gonna go in to as what parameter argument combos in the constructor?
>> Chris: Name and score-
>> Will Sentance: Name is gonna be Alyssa, score is gonna be 8 inside the execution context, okay.
>> Will Sentance: Create the execution context, I'm actually going to do this.

[00:04:01]
This equals, I almost wanna say pseudo equals. You can't assign to this and behind the scenes is what's happening. This is gonna equal the return value of calling super. Now I'm gonna actually show you briefly what actually happens. It does this, there's a new thing in JavaScript that allows you to call a constructor function.

[00:04:20]
That's a function that should have a new keyword in front of it, that allows you to do it without the new keyword. It's called like Reflect.construct, can someone type that into Google? I think it's called, Mark, do you mind to tell me, reflect.construct it's in DNDM? Reflect.construct, so I'm actually gonna show you what this exactly does behind the scenes.

[00:04:41]
I'm gonna do it in red, cuz it really is about the extends that makes this happen, okay? So it's gonna be reflect. Does it say reflect.contruct exits?
>> Chris: Yeah.
>> Will Sentance: Reflect.contruct, okay? It's first argument is the function that's going to be creating the object. What is the function that's gonna be creating the object?

[00:05:04]
It is, userCreator because it goes to look for Proto and its userCreator. This is what it's doing behind the scenes userCreator, and then the arguments. Allysa I promised myself not to tell it to not to do this bit but there we go. And then, the function who's prototype object we want to have the returned objects that comes out the quarter super point 2.

[00:05:32]
Which is paidUserCreator, so paidUserCreator, paidUserCreator. And then that returns out an object into the this. But for our purposes just think of it as the super, we can write it a couple of ways. Think of it as the supper being. Super goes, no what do I want to run to produce the object?

[00:05:57]
While the object I want to have is the user object, but we gonna add a bunch of stuff to it. So go run the user creator constructor. How do we know to go run that? Because extends put in the proto, a reference to the user creator function. Or user create a constructor function.

[00:06:15]
So super goes no what, so you can almost think of it like this. That in local memory super is set to user creator, not literally but you can almost think of it as super is set to user creator. Okay so super is set to user creator.
>> Will Sentance: Code with Alyssa and 8 and that's gonna be stored in this.

[00:06:41]
These are the three different ways of saying the same thing. Don't worry too much about this reflect.construct thing. It's just a new way of allowing us to and behind the scenes, this is really what's happening. We are running user creator with, sorry, the new keyword in front of it.

[00:06:58]
[LAUGH] It's gonna return out the object that we know well and love. But, we're going to control the returned out objects proto, to not beat a userCreator prototype object. But instead to be to pagesCreator prototype object. Okay, let's just do it. I regret bringing that reflect.construct thing. But just know that what we pass in last there,means that this running of superUserCreator is going to set the prototype to be pageUserCreator.prototype, not userCreator.prototype.

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