Create an Object with a class

[00:00:00]
>> Will Sentance: So, here we are with our final approach. This is a mega standard approach now to achieving object oriented programming, pretend style, in a language java script, that is inherently a prototypal language. Not an object oriented one under the hood but we are now able to really, seemingly emulate a object origin language within a prototypal environment.

[00:00:32]
And this is it. Wow, look at it. [LAUGH] Beautiful. Left hand side you've seen before. Note, and we're gonna walk through it bit by bit now. This is our class version. We've got the function bit of the function object combo. But when we run the function, we'll create an object in user1.

[00:00:52]
Now it's got a subtitle constructor. But it's still going to end up here. The same name in increment. Now look as though they're just there. No, no, no, behind the scenes, how many noes is a? Behind the scenes they're being stuck in the prototype object. No problem. So we're gonna do that left hand side first and then the right hand side here.

[00:01:20]
We're gonna lay out exactly how extends and super are working under the hood. We'll figure it out together, if it's the last thing we do. Okay, here we go, line one I could almost leave this up here, cuz it's really the same, but I want us to actually build it out.

[00:01:46]
So line one, what are we doing? Let's have Chris, what is it say we're doing there Chris, in line one?
>> Chris: Declaring.
>> Will Sentance: Yeah, it's already slowing.
>> Chris: We declaring a class called user creator.
>> Will Sentance: User creator, a class which we know, I'm gonna put it in pink, pretend it's something special, but we know the truth.

[00:02:19]
It's just a function object combo, as they always are. And the function bit, yes, now has a subtitle constructor. And the class is called what, Chris?
>> Chris: UserCreator.
>> Will Sentance: UserCreator, it has a function which now, which when we call, we put UserCreator parens, it's gonna run that function bit.

[00:02:46]
But that function now, when we wrap it we give it a subtitle. What's the subtitle we give it Elliott?
>> Elliot: Constructor?
>> Will Sentance: Constructor, but it doesn't really mean much. It's just the function, and the function object combo. But let's just call it constructor, there it is. So if we run user created with parens.

[00:03:05]
We run the constructed bit of it. That is we run the function in the function object combo. Let's make sure we put the object bit in as well. There's the object bit. Function plus object and there it is. There it is. That's the best object I've drawn and JavaScript immediately grabs a function, the constructor bit, sticks it on the function bit or the function object combo, and then it grabs, David, what just below?

[00:03:34]
>> David: Same name?
>> Will Sentance: Same name and it puts it on what?
>> David: On the prototype.
>> Will Sentance: Prototype property of the object in the function object combo. And there it is say name is stored as a method for nothing has changed to the very point that I could later add more functions directly use the created prototype and put more functions in there, no problem.

[00:04:03]
Okay, increments also added. Increment is also added to our function object combo, and it's object portion under the prototype property, there it is. Okay, our set up is done. Elliot, let's get making our user one object. Take it away man.
>> Elliot: New constant is created user one.
>> Will Sentance: Yeah, initially uninitialized and we're gonna call what function?

[00:04:38]
>> Elliot: The constructor or the-
>> Chris: Portion, yeah, the constructor portion of the class but let's be clear, it's just the function, yeah. And the function object combo and we're passing what arguments?
>> Elliot: Fill, and for.
>> Will Sentance: For, we're gonna create a new.
>> [LAUGH]
>> Will Sentance: A new-
>> Execution.

[00:05:02]
[LAUGH]
>> Will Sentance: Michael, you'd make me proud. Seth, of course, absolutely. With the mutator. That is the new keyword that changes up how this execution context plays out. There it is. There it is. There's our execution context. New keyword starts doing stuff. Nick, you did this well last time.

[00:05:26]
Do you mind doing it again? Help me out first with the parameter argument combos.
>> Nick: The parameter name gets the value fill and the score gets the value of [INAUDIBLE].
>> Will Sentance: Yeah, four. Now, note people just be clear running user creator runs the constructor portion. In other words using user creator runs the function.

[00:05:49]
That's all the class is. The function is now subtitle constructor is what it is. Okay, now new keyword starts doing its magic. Nick, help me out.
>> Nick: This an empty this object gets created.
>> Will Sentance: Yes, hold on. This is an empty, big old empty object. Yeah, with?
>> Nick: A proto set to the prototype of the user/creator.

[00:06:19]
>> Will Sentance: Yeah, the prototype object on the user/creator object in its function object combination.
>> Will Sentance: Here it is, here it is, off it goes. Not particularly nicely done but, there we go. Yeah?
>> Nick: And then finally, in this object gets set a property of name.
>> Will Sentance: So now we take over.

[00:06:45]
We're doing our bit here, yep.
>> Nick: Phil and score of four.
>> Will Sentance: Fantastic, but hold on. The object is stuck inside user creator, we don't want it in there.
>> Nick: It gets returned to user one in this case.
>> Will Sentance: It gets returned, the object with the label this, the designation this gets returned out to user1, and there folk, it is.

[00:07:13]
With name Phil score four, and dunder proto dunder, as a nice little cheeky link up to our set of functions. Thank goodness, otherwise we wouldn't have access to those functions. But nor do we wanna have those functions on the object itself. Good, almost there. All right, so, user2, the same, it would also have a bond to that object, we won't plat it out, let's do our check.

[00:07:49]
By the way, look how fast we are now. Look how fast we get through the stuff that was so demanding earlier, remarkable. Good job everybody. So user1.sayname, Michael, do you mind doing my lookup journey here for JavaScript?
>> Michael: So user1 is gonna be looked upon and global memory?

[00:08:11]
>> Will Sentance: Yep, there it is.
>> Michael: And then say name is going to be try to be found.
>> Will Sentance: And it's not there. It's not there, so it's going to go to proto and then crawl up and then find sayName under prototype. Beautiful. Beautiful.