The Hard Parts of Object Oriented JavaScript

Creating an object with a Sub-Factory Function

Will Sentance

Will Sentance

The Hard Parts of Object Oriented JavaScript

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

The "Creating an object with a Sub-Factory Function" 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 continues to diagram the solution and demonstrates how the sub-factory function affects the functionality of an object that is instantiated.


Transcript from the "Creating an object with a Sub-Factory Function" Lesson

>> Will Sentance: All right, let's get to making our paidUser, here we go, here we go. Do we have enough room? We definitely do not. Are we gonna still do it? Yes. All right, left hand side here, Seth, what are we doing?
>> Seth: Declaring a constant, paidUser-1.
>> Will Sentance: Well done, man, yep.

And it's initially uninitialized?
>> Seth: Assign a value, or the result of the paidUser creator, with properties, Alissa, 8 and 25.
>> Will Sentance: Yep, perfect, give me a second, paidUser.
>> Seth: Sorry, arguments.
>> Will Sentance: Arguments, yes, yes. I make that mistake all the time. I literally made that same mistake regularly in giving this talk, calling them properties because we know they're gonna end up being so.

They are not properties. At this point, they are just arguments that are gonna go into the local execution context, local memory. We never assign them to something in an object, they're definitely not properties. If we do assign them, they become properties. Okay, let's create that big old execution context.

There it is, no, we'll save a shouting execution context to later. So the old execution context. Into it we go, in it's local, this is going to be brutal. Let's make it as wide as possible, into it we go. We passed in Alyssa at eight and twenty five, into it we go folks.

Okay, what are the first things in our local memory? Kick us off, Susie, calling creator with Alyssa A25, and we go, what are our first parameter argument combos? Combos of argument pairings up.
>> Susie: So okay, so we have the paidUser and then we're-
>> Will Sentance: But before that, we've gotta handle our arguments going into our parameters, so-

>> Susie: So it's going into the function paidUserFunctions?
>> Will Sentance: Fantastic. Hold on, before we go into the body of paidUserCreator, we've gotta handle just these inputs filling in the parameters.
>> Will Sentance: It's an easy bit to miss. Because it sort of seems very obvious. But they do actually go in our local memory as locally available names.

So now paid name is going to be replaced by what?
>> Susie: The paid name is gonna be replaced by-
>> Will Sentance: We pull us in our arguments in the same order we have our parameters, so list will be paid named, and eight will be-
>> Susie: The paid score.
>> Will Sentance: Paid score, and 25 will be.

>> Susie: The balance.
>> Will Sentance: Account balance, perfect, exactly, spot on. And so paid name, yep paid name, and these are not properties remember, these are just local memory stuff. Paid name is, Alyssa remind me again, if you remind Susie what the next one is?
>> Susie: Paid.
>> Will Sentance: Yeah, paid score.

>> Susie: 20.
>> Will Sentance: Okay, exactly and account balance.
>> Susie: It's 25.
>> Will Sentance: It's 25, fantastic, thank you, Susie. Okay, now we hit the body of the function. Nick, pull me through this bit. This is not necessarily too hard. They're gonna tell you upfront, look, we're using userCreator to hopefully put Alyssa and score, Alyssa eight on an object, get it out and then do some fiddling with it.

But we're not doing that ourselves again even though paid user creator has the properties, name and score And maybe we could add them right now sort of using new code. No no no why would we do that? We've got the codes right on the name on a score to an object over here.

So let's use that code. And then we'll do some fiddling to make it specific to a paid user. So let's go and use that code. Talk me through this first line in paidUserCreator, Nick.
>> Nick: We're setting a const new paidUser equal to the return, whatever gets returned from the function userCreator

>> Will Sentance: Perfect, which means we got to go in?
>> Nick: We got to go in to-
>> Will Sentance: Exit, not exit, execute- [LAUGH]
>> Nick: A new execution context.
>> Will Sentance: A new execution context, perfect, so a new paidUser will be the return value of calling userCreator with what arguments?
>> Nick: With the arguments paid name-

>> Will Sentance: Which is what in our local memory?
>> Nick: Alysa.
>> Will Sentance: Alysa,
>> Nick: And then 8.
>> Will Sentance: 8, excellent. And then now let's create that execution context. There it is, and it's local memory?
>> Nick: We are setting [LAUGH] we are setting a const new user.
>> Will Sentance: So Alyssa and Nate are being passed in, [SOUND] to userCreator?

>> Nick: Right, as the name and score.
>> Will Sentance: As the name and score.
>> Will Sentance: Name is going to be there for Alyssa.
>> Nick: And then score will be eight.
>> Will Sentance: Fantastic man, score will be eight. Perfect, and now, so we're in user creator, I know it's off to the side but we're running it inside of paidUserCreator.

There it is, and,
>> Nick: Then we are going to create a new object.
>> Will Sentance: Fantastic, our new [INAUDIBLE] called new user which is gonna be automatically what Nick? A big old?
>> Nick: Function, or a big old object.
>> Will Sentance: A big old empty object. What does object.create always return us, Nick, remind us?

>> Nick: It always returns an object with proto on it.
>> Will Sentance: Well done, an empty object, but with a hidden property, and what hidden property?
>> Nick: Proto.
>> Will Sentance: Proto, which is a reference to whatever was passed in, which in this case is?
>> Nick: Is user functions.
>> Will Sentance: User functions, so I'm just gonna indicate that which is user functions up here, but that's not very good because this object, this the one we want to be a paid user.

So we want it probably to have access to paid user functions. So we're probably gonna need to change that, aren't we? So we're using our prewritten code to create our objects, but it's already given us a few issues. It's already sticking the wrong set of functions that are gonna be available in that object when it eventually comes out to paiduser1.

Cuz we're gonna return into newpaiduser, and then return it out from there into paiduser1, but it's got the wrong A set of functions available to it. We wanted to have these set of functions. And then from there, have access to these functions. So, we may need to switch out this proto in a moment.

Let's have a look if we. Looks like we're gonna do that. Switch out this proto for the right set of functions, okay. But for now, it's just helpful to be able to use. Prewritten functionality to get our name and score in. In reality, there may be many more properties we'd add, so we wanna use this prewritten functionality from user.

It's also good for our mental sort of thinking about how this is laid out. Paid user is a sub type of user, and so it kind of makes sense to use the code we use to create users, to create paid users, and then mutate it a bit. Rather than start from scratch.

Because they are related. They're kind of hierarchically related. It's a more specific version of the user type. So it's not a bad thing to create it, it's a bit off, and then adjust it. Okay. Good, good, good. So final We haven't added the properties yet. Help me out Chris, add the properties to the new user object inside of User/Creator.

By the way who have I been calling in, behind my back so I can't remember was it Nick or Chris?
>> Nick: You were talking to me.
>> Will Sentance: To you, Nick.
>> Nick: Yeah.
>> Will Sentance: Really, really good by Nick, by the way. So now we hit Help me out, Nick.

>> Nick: All right, newuser .name gets assigned.
>> Will Sentance: What's the local value, therefore what's the local name?
>> Nick: Where do we do-
>> Will Sentance: Paid name, which was-
>> Nick: Which is Alysa.
>> Will Sentance: Yeah, so we parse Alysa into paid name and then we parse paid name into user/creator, that means we parse Alysa into user/creator where it was given the label name.

And now we've got the score property. Help me out with this, Nick. What's the f*cking score?
>> Nick: Eight.
>> Will Sentance: Eight. Now we've got this lovely object here, but it's stuck inside the execution context. You want to get it out into paid user creator where we can make some changes to Andre's new label, new paid users.

How did we get it out?
>> Nick: It gets returned.
>> Will Sentance: It's returned. Yeah, exquisite. We return new user. What does that mean? It means JavaScript sees the line return new user, and goes new user, what's that? This object, returns the object. Not new user label, that gets forgotten, just the object.

Out it comes into new paid user where We, well we have now, sorry, we have the property Alyssa, and score is eight, or probably, name is Alyssa, score is 8, it still has its proto-bond to user functions, Seth, do we want it to directly proto-bond to user functions, is that useful to us?

>> Seth: No way.
>> Will Sentance: No way, thank you Seth, I appreciate You were playing along with me the whole time, thank you very much, I'm very grateful. No way, that's not useful at all, I'm with Seth. No way. So what are we going to do? Now we've returned out that object into new paid user in that very next line, Seth.

>> Seth: We're going to assign a new object to proto who already has it's proto assigned to user function.
>> Will Sentance: And we're gonna give up on that proto assignment. We're gonna give up on that proto assignment not to use the functions anymore. And we're instead gonna set new paid user.

Remember, this is just how set prototype works. The first thing you pass in, you get to control its proto with the second thing you pass in. The first thing you pass in was new paid user. It then takes that new paid use of proto and says whatever is there, forgot about it and stick paid user functions in there which is a link to, let's use the purple pens so we know it's a reference.

A link to paid user functions which means this object which is gonna be our paid user one is gonna have access to Increase balance, beautiful. But also, because paidUserfunctions, it was given its own to use the functions. If we looked to paidUserfunctions, and are looking for, say, increment, we will find it.

We won't panic when we look up for that. And there it will be. We're gonna see that play out in a moment don't worry, we're gonna see it actually play out. What is the final thing we wanna do to this object Seth so that it is actually a paid user type, what's the final thing we're gonna add?

>> Seth: Account balance.
>> Will Sentance: Account balance property.
>> Seth: With the value of 25.
>> Will Sentance: Fantastic thank you Seth, there it is 25. Okay let's grab that object and Return it out, yep, return it out into paid user. Let's hope this paid user is everything we want it to be.

Hopefully it has properties that are the same as users, cuz we used the code to produce them, it has specific properties that are only for a paid user. Hopefully it also has specific functionality that's only for a paid user. Like increasing balance. I can't increase a balance of a non paid user.

But it also has all the functionality of a regular user. That's what we hope. All right, name is Alyssa. Score was eight. Returned it out. Account balance. Forgive my handwriting a little bit here. Account balance is 25. And its proto bond, its hidden proto reference is up to?

Paid User functions. There it is, the paid user functions, which itself has a proto reference up to user functions. So now we do our all important checks.

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