The Hard Parts of Object Oriented JavaScript

Create 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 "Create 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 sets up the next bit of code and explains how this code is interacting with the code that was written in the previous segment. Object.setPrototypeOf is utilized to set the __proto__ of a function to achieve the functionality that we need.


Transcript from the "Create a Sub-Factory Function" Lesson

>> Will Sentance: So I'm gonna do another sort of dotted line across here just to sort of show we've now moved on to the right hand side. But we're still in the same run time. We're still running the same code. So paid user. I should have been less spread out.

Paid user, creator is a function definition, great, we don't do any of the code inside of it, but we hope, when we call that function, it's gonna give us out an object, that's what we hope. Okay, next line Chris.
>> Chris: We're creating a constant, paid user functions.
>> Will Sentance: Thank you man, yep user functions, which is an object.

Michael, what property do we have on that object?
>> Michael: Increase balance.
>> Will Sentance: Increase balance which is a function. Excellent man thank you. Okay so I slow down at this point cause I want to get all these pieces right. Here's our dream, people, is that I can create a user, as a paid user.

Let's call it paid user one. Here's my dream, you're probably gonna see this in a second, but here's my dream. That I can create an object, paid user one, that has all properties of a user, like name and score, plus a bonus property, but has my user one would not have access to increase balance function.

But my paid user one. Would have access to increase balance, but would also have access to user functions. David, what might I want to add to paid user functions such that it has a link to user functions, so that when I go looking on this object for my function using the proto-reference on say paid user one.

See if I don't find something on here, I'm gonna go and look at the regular user functions. What might I wanna add to this object, how might I want to make that link?
>> David: So is that what set prototype of this is getting after?
>> Will Sentance: What property that all objects have.

>> Chris: Proto.
>> Will Sentance: Proto, and proto is the place, it's a hidden property. It's the place where if I go, if JavaScript goes looking on this object for a method and doesn't find it, where does it go looking, Seth?
>> Seth: In proto.
>> Will Sentance: In proto. Whatever, so it wouldn't be nice if that proto were a link up to.

>> Chris: User function.
>> Will Sentance: Up to user functions, exactly. So that we're gonna still, come back to you in one second, Nick, I promise. So we're still gonna have a link up to that shared set of functions. But our user one, it's just gonna link straight to the user functions.

They're never gonna see this stuff. But we're gonna open a moment our paid user. Let's call it paid user Terry or we call it paid user one here. But they're gonna go looking for functions first in paid user functions. And if they don't find something in here, they're not gonna panic, they're gonna look up to user functions.

Meaning they're gonna get access to both the types of functions. It's gonna be very nice, so how do I make the proto link up to user functions? Well I use this built-in tools object that set prototype of which takes in as its first input, its first argument an object.

Which one is it, well it's this one paid user functions. And then it takes in as its second input whatever you want to set proto to on the first input page of the object. So whatever you wanna set the proto pages functions to, parse in as a second argument.

Well, that's gonna be user functions. Why not call it set proto of? But why? Cuz technically they call anything that's referenced from proto the prototype of this object. But it's referenced through something called proto. It's profoundly confusing. If there were not a property elsewhere called prototype that is something totally different, which we saw earlier, maybe not so confusing.

But where there is literally property as well as prototype, it seems crazy to me that you would say set prototype of, when it is explicitly not setting a property equal prototype, is explicitly sending a property called, proto. Now in the spec it technically calls this property, even more confusingly, prototype with two square brackets around it, which is different to the prototype property.

Well, that's just ridiculous. So we'll use the term proto for it, because that is what the Chrome DevTools refers to it as, and it's become pretty standard. Okay, so object of set prototype of, takes in as its first input the object, pages of functions, and then says, set its proto to the second input.

Which is user functions. So let's just put that in here. User functions. So this is looking pretty nice, people. We have an object here, that has a link up to user functions. So if we now later on are gonna go paid user one dot increase balance, let's hope we can go and get it from here.

Paid user one dot, say, name. We're not gonna find it here. Hopefully we can still get it up here. In other words, our paid user type or paid user object will still get access to all the stuff that users had. Nice.

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