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

The "Assigning Properties to Instance" 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 how instantiating a paidUser object using the new keyword would create a new context to consider.

Preview
Close

Transcript from the "Assigning Properties to Instance" Lesson

[00:00:00]
>> Will Sentance: So now, Seth, we're inside the UserCreator. We have a nice this, it refers to an object. By the way, note, side effect. This is a side effect from within the UserCreator. We're probably not going to return everything out, because we're changing stuff when they're out already. And so Seth talk me through the assignment that now happens inside of UserCreator.

[00:00:20]
We called out this, it refers to the object. Created and paid user creator with the help of new, talk me through the assignment.
>> Seth: We are going to apply-
>> Will Sentance: Sorry, before assignment, forgive me man. We've got to do our, no, my fault. We've gotta do out argument.

[00:00:32]
So we've gotta add this in our local memory. Help me out with that argument.
>> Seth: So passing in paid name which is value of Alysa.
>> Will Sentance: And becomes the value of what parameter in here?
>> Seth: Becomes the value of negative.
>> Will Sentance: Yeah, well-
>> Seth: And page score which is 8 becomes the value of score.

[00:00:50]
>> Will Sentance: Fantastic.
>> Seth: We're then going to apply name and score to the lexical list.
>> Will Sentance: Yeah, lexical list, I'd be a bit cautious to call it that because it's not actually, we are explicitly it feels like the letsCallThis, and like our arrow function. But letsCallThis actually is stored on a property of a function, as a letsCallThis.

[00:01:10]
Here, we are explicitly saying it's the object1, there. I see where you're going with the letsCallThis, that's not an unreasonable term to call it.
>> Will Sentance: Yeah, okay I can take that, yeah, that's fine, that's actually not unreasonably difficult. So this.name but it refers to the object one layer out which is what you mean by lexical here I suppose.

[00:01:28]
>> Seth: It just sounded better than this, this, this.
>> Will Sentance: Yeah, I hear that man.
>> Seth: [LAUGH]
>> Will Sentance: So this is the object one layer out to which we're gonna add a-
>> Seth: Name score.
>> Will Sentance: Name, property.
>> Seth: And it's gonna be-
>> Will Sentance: Yeah.
>> Seth: Score is 8.
>> Will Sentance: Yeah, perfect.

[00:01:43]
I hope people didn't mind us dragging that out a bit together, because it really is. So those are both having an effect out here, because we passed into user creator.core this object to be used as the this inside of UserCreator. So we're sticking the properties on. It goes where's this, this is one layer out, stick name on it and Alyssa.

[00:02:06]
This.score where is this, it's one layer out score, set it to 8. So look at, though, folk, I have the object in paid user creator which by the way has the right proto already, and I filled in its properties. I didn't have to write that code again. I use the UserCreator, but man, did it take a bit of contrivance to use that code.

[00:02:28]
Cuz I had to use call to make sure I was making the changes on the right object, one layer out. Pretty brutal, I think. One second man, I promise. Do we have a return value from UserCreator? No, we didn't use a new keyword on it, so it doesn't auto-insert return out.

[00:02:45]
We didn't need it, because we're referring to an object one layer out. So we had a side effect, sort of pseudo-return, a kind of side effect return. All right, and then as you say, right, we could use apply in exactly the same way. But except we put our further arguments in as a single argument in an array.

[00:03:04]
We exit out of execution context and we don't return anything. We were doing side effects. I mean, side effects. I would never return value mu, changing something outside of the execution context from within, yeah, the exclusion context. And then we hit our final line of our execution context, which says to do what?

[00:03:23]
Nick, what's the final line? We're back in page UserCreator, now what's the final line? We've got our object out, it didn't have quite the right properties yet, to be a pageUser, so what do we need to do?
>> Nick: Now, that we have the right properties on there, it will be returned to paid user one.

[00:03:40]
>> Will Sentance: I agree man, but we've got one more property you wanna add to make it so.
>> Nick: Yeah, this.accountBalance will be set to the account balance that's passed in.
>> Will Sentance: Beautiful, and now we're back out to the this being directly the object we're changing on. We're back out to page UserCreator, so I just put this in here to make it really clear.

[00:03:57]
This.accountBalance is account balance. The one that was passed in. And therefore it is what, Nick?
>> Nick: 25.
>> Will Sentance: 25, and we got our beautiful object here.
>> Nick: And now it's returned.
>> Will Sentance: Because of what did we run pages creator with? The help of?
>> Nick: New.
>> Will Sentance: The new keyword, and the final thing it does is return our object out into paid user one.

[00:04:28]
It loses the name, this, we get the object out and in a moment we're gonna do our lookup check. We're gonna do our lookup check to see, do we have everything we need? There's our object returned out. With name, and we'll do thumbs in a moment people, and I know that this feels very complicated but we are seeing the final penultimate pieces of all of OOP and JavaScript.

[00:04:56]
And especially, if you use things like React, you're gonna see on the final slide, this is the model behind React. There isn't really much more. This is the model behind React. This notion of having access to functionality's not directly there. Our solution four is gonna implement it the way React does.

[00:05:17]
Didn't used to. React used to implement it, if you remember in the previous versions before six version, pretty much this way. ES Six version implements it this way, implements it solution four way in React. Okay, so it's got this bond up to, there it is. Up to, sorry, hold on, up to this object, the prototype object on Pages Creator, because of the new keyword help that ensured that the auto created object got a bond to the function store on that functions prototype object.

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