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

The "Create an Object with new" 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 refactored solution that provides the store of automatically linked functions by utilizing the new keyword.

Preview
Close

Transcript from the "Create an Object with new" Lesson

[00:00:00]
>> Will Sentance: First, starting on the left hand side, we're go to build out our base, they call it base class, the one that produces others. We do the left hand side first, building out first our user creator function. Let's do it. We have all our information, that was our last interlude, people.

[00:00:18]
Now we are charging on, to our final subclassing approach, and here we are with our penultimate subclassing approach. Here we go. Line one, Terry, it is your moment, walk me through we we're doing in line one.
>> Terry: Defining a function userCreator, passing two parameters, name and score.
>> Will Sentance: Right, we're not worried about the parameters quite yet, but yes they are absolutely there.

[00:00:45]
Raise your hand if we think we've gotta bring back our awareness of it being a function object combo? David's right, [LAUGH] it was definitely my answer's yes voice. Because we are now going to run this userCreator with the new keyword, changing up its behavior inside. Including when it creates that object automatically, having that object be linked up to userCreator in its object format, the prototype property, which is itself an object.

[00:01:19]
We are almost there, we're gonna be done in under three hours from now.
>> Terry: [LAUGH]
>> Will Sentance: No, no more than three hours, I can guarantee you. No, no, it was said, folks, look at this, wait, done, that's it. Does that help when you see all this? Probably not, but we are almost there.

[00:01:44]
Okay, so userCreator. But you've now threw me back, I've gone to not looking at that name. Chris, help me out with the full declaration of userCreator. It is a function plus.
>> Speaker 3: Object.
>> Will Sentance: Object, which has on it?
>> Speaker 3: This, prototype?
>> Will Sentance: Prototype, [LAUGH] there's only two answers correct.

[00:02:09]
>> Speaker 3: [LAUGH]
>> Will Sentance: Either this or prototype, you got the wrong one that time.
>> Speaker 3: [LAUGH]
>> Will Sentance: But prototype, which is itself an?
>> Speaker 3: Object.
>> Will Sentance: Object, there it is. Into which we're gonna put any functions, that objects that get returned out of running userCreator with the new keyword are going to have access to through their proto property, okay.

[00:02:34]
So let's put those functions in there. David, if you don't mind putting those functions in that object as kind of completely in technical communication as you can, if you don't mind.
>> Speaker 4: There's a property called sayName, sorry, you want me to start at the top okay, yeah.
>> Will Sentance: Well, if you don't mind sort of saying userCreator.prototype.sayName.

[00:02:53]
How's it get in, tell me through the look up and assignment process. Just be as precise as possible userCreator.prototype.sayName.
>> Speaker 4: UsuserCreator.prototype.samename is a function.
>> Will Sentance: Right, but let's make sure, okay.
>> Speaker 4: You want me to look it up first? Or just, I thought we were-
>> Will Sentance: Just sorta tell me how, when JavaScript sees, that doesn't go.

[00:03:10]
>> Speaker 4: Gotcha.
>> Will Sentance: Port function, it goes across-
>> Speaker 4: It's for userCreator in the global memory.
>> Will Sentance: Perfect, finds it.
>> Speaker 4: Yes, inside of there it looks for a prototype.
>> Will Sentance: Inside of its object portion of its function object combo, the find prototype property.
>> Speaker 4: Then it looks for a sayName.

[00:03:24]
>> Will Sentance: Right, and it assigns on that object a sayName function, excellent. So if you want to do the same but for login. Sorry is it login? Increments, sorry, increments.
>> Speaker 5: We're gonna assign the increment method on the prototype object on the object portion of userCreator.
>> Will Sentance: [APPLAUSE] Exactly, fantastic, thank you, man.

[00:03:49]
That is exactly what we're gonna do. I couldn't have put it better. That level of precision is good for the mind. It helps you yourself have the clarity of what's going on here. Fantastic, okay, now let's get on to making our user 1 object. Let's have Michael, talk me through this, Michael.

[00:04:09]
>> Michael: So in, we're gonna create a const user 1.
>> Will Sentance: Perfect, it's uninitialized.
>> Michael: Yeah, uninitialized, and then we're gonna to execution context.
>> Will Sentance: Perfect, to execute what function?
>> Michael: UserCreator.
>> Will Sentance: Fantastic, can we just say thank you Michael, not getting the new keyword, thinking it makes it special.

[00:04:27]
No, it's an execution context for the execution of the userCreator function. Very well put Michael. There it is, userCreator function with Phil and 5, okay? Exclusion context, but it is an exclusion context with a little bit of sort of fiddling done in it, because of what key word?

[00:04:46]
>> Speaker 7: New key word.
>> Will Sentance: New key word, exactly. The new key word is going to do a bunch of stuff in here automatically. What is that stuff? Well, we'll see in a second, before we get to that stuff let's just make our local memory and handle first. Our arguments Terry, give me the arguments inside of userCreator.

[00:05:07]
>> Speaker 7: Phil and 5, name.
>> Will Sentance: Name is said toPhil-
>> Speaker 7: Score is equal to 5.
>> Will Sentance: Right, so the name parameter, do you see why it's so important to say parameter here so we don't think these are properties on an object? The name parameter is now locally available inside a userCreator as the argument, the value Phil.

[00:05:29]
The score parameter is now locally available as the score argument 5. Beautiful, all right. Now, the new keyword takes over. Who feels comfortable now to tell me all three things a new keyword automates inside? Yeah, Chris? Let's do it, man. So what's the very first thing it does?

[00:05:49]
>> Speaker 8: It creates a new object for this.
>> Will Sentance: This is a new object, beautiful. This is a new empty well empty object, but with what?
>> Speaker 8: It sets the proto?
>> Will Sentance: Uh-huh, beautiful, that's it. Proto, everything in blue we are not doing, it's being done for us. Sets its proto to userCreator.prototype, this lovely object, into which we stored our functions.

[00:06:19]
That this object, when it gets returned out, better have access to, it will. And what's the final thing that it does? We're not gonna get to that yet, we'll come to that in a second. So proto is set, great. Now,
>> Will Sentance: Elliot, take over with the code we wrote.

[00:06:39]
>> Elliot: Name gets set to Phil.
>> Will Sentance: The name-
>> Elliot: The name property-
>> Will Sentance: Property on the auto-created,
>> Elliot: Object?
>> Will Sentance: With the label-
>> Elliot: This.
>> Will Sentance: This, excellent, folk. So try and be as explicit and complete as you can, just to keep the mind clear on what is incredibly kind of finicky stuff.

[00:06:58]
So try that one again for the next line, Elliot.
>> Elliot: Score on the, for the dis property or for the dis object.
>> Will Sentance: Perfect.
>> Elliot: Gets set to 5.
>> Will Sentance: Yeah, fantastic, thank you, Elliot. There it is, and now we have our perfect object here Elliot, but it's stuck inside of the user created functions execution context and we want it global.

[00:07:24]
So do we return it? I don't see any returning it out. So what is the final thing that this keywords, sorry, the new keyword that automates?
>> Elliot: Returns the object.
>> Will Sentance: Returns the object. Out it comes into what global constants, Elliot?
>> Elliot: User 1.
>> Will Sentance: Into user 1, fantastic, thank you so much, man.

[00:07:42]
There it is into user 1 where it's got name, Phil, school, 5, and a hidden proto bond to, let's use the purple pen for the bonds to, [LAUGH] we're doing well, you're almost there, to this lovely object full of functions. That means our user 1 object has got its data.

[00:08:15]
And without it being copies, got access to the functionality it needs. Which remember, is all we ever wanted bundle our data or functionality together. Have I used a data name that's called start looking in the sun outside, and thinking of what could be.
>> Elliot: [LAUGH]
>> Will Sentance: Think how valuable, how fascinating it is to have this,

[00:08:43]
>> Will Sentance: Look at, I mean, are you excited? I'm excited.
>> [APPLAUSE]
>> Will Sentance: By the prospect of having our data in front because it's gonna make our lives, as engineers. And we have to do that every day, right? Well, it makes our lives so easy. Because look at this user.

[00:08:58]
All I want is, is my functionality there available on the right-hand side of the dot. Seth, it's your moment, my friend. Walk me through the lookup process. User 1 is in?
>> Speaker 10: The global memory.
>> Will Sentance: Global memory, it's there. Increment is on it? No, it's not.
>> Speaker 10: I freak out a little.

[00:09:14]
>> Will Sentance: Freak out a little.
>> Speaker 10: And then I go to the proto.
>> Will Sentance: And what do I find?
>> Speaker 10: What do I find do they find it?
>> Will Sentance: No, cuz I got it wrong, I wrote it wrongly.
>> Speaker 10: They don't find it.
>> Will Sentance: No, no, it's there, it's there.

[00:09:22]
>> Speaker 10: Hard error crash. [LAUGH]
>> Will Sentance: Well, that's my fault, there it is, we sorted it, we find it, and we use it. Beautiful, excellent, thank you, Seth. We didn't even, why do we use, whatever, we do say a name here, but they're both up there, aren't they? So let's just change that actually, it should be same name, excellent, we'll clear all this up later.

[00:09:45]
There we go, same name. So we did the same as the previous version, but now we got our store of functions are automatically linked to with the help of the new keyword that automatically created the object that came out of user creator. By this point you should start being a little bit familiar with this approach.

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