Prototype Chain Example: Prototypal Link

[00:00:00]
>> Will Sentance: We are going to create I use a great function, but we call this object single copies or single, I don't even want us a copy of that song is no single same version of each of our functions. And we're going to run I use a creative function, it's going to create objects inside using object create, which is just another way of creating the object.dddd But that objects going to have somehow our bond to that user function store object.

[00:00:23]
Meaning that, when that object gets returned out into user one with its properties, but no function stored on it. When we end up using that object, using one dot increment, and it doesn't find increment on the object, are we gonna panic It's gonna have a link somehow to use a function store where it's gonna find the increment method and use it.

[00:00:45]
All right people, here we go. Line one. Jeff, what are we doing in global memory? What are we doing?
>> Jeff: We are declaring a function user created.
>> Will Sentance: Excellent, in global memory, user, creator,
>> Will Sentance: There it is. The old function, excellent. Now, to Matt.
>> Matt: We're gonna define a constant user function store-

[00:01:15]
>> Will Sentance: Yeah.
>> Jeff: With a value
>> Will Sentance: Of an object.
>> Matt: Of an object.
>> Will Sentance: Yeah, don't get caught people, here in thinking it's anything else. It's an object, yeah. There it is. Yeah, and what's stored on the object?
>> Matt: We have an increment property and a login property.

[00:01:29]
>> Will Sentance: Yeah, and that's an increment method because the function's stored on it. And a login Property which is also a method. Well, my arm is actually starting to ache. There we go. No problem. There it is. Thank you too much. Now we move on to the next slide left hand side.

[00:01:46]
Braden, what to say to do?
>> Braden: Declare the constant user-1.
>> Jeff: User-1.
>> Will Sentance: Do we know what it showing here, people. Nope, we got to go and run userCreator, brand new everybody.
>> Students: Execution context.
>> Will Sentance: Execution context, beautiful. That was so vibrant in which to pass our arguments will and three brand new execution context as you all said

[00:02:16]
>> Will Sentance: So wonderfully, here it is. No, there it is. Okay, into it we go,
>> Jeff: I didn't do is local memory we had,
>> Jeff: Okay, first thing we handle, over to Dan, what are we gonna handle first?
>> Will Sentance: We assign Will to the argument name.
>> Jeff: Almost, the Will argument to the-

[00:02:48]
>> Will Sentance: Sorry, to the parameter name.
>> Jeff: Parameter name, yeah, exactly. And then the next parameter is score, we assign in what argument?
>> Will Sentance: 3.
>> Jeff: 3, beautiful. Very nice, thank you Dan. Now we enter the body of the function where the whole point of this function by the way, create an object with the data of a particular user stored in it and the functionality that will ever, ever be applied to that particular user.

[00:03:08]
That's the only point. So what do we do in the next line? Kyla, we create a?
>> Will Sentance: A constant new user.
>> Jeff: Yeah, and assign to it
>> Will Sentance: Empty object.
>> Jeff: An empty object. Go ahead, sorry.
>> Will Sentance: With the properties of user function store.
>> Jeff: No properties, it's really an empty object.

[00:03:25]
But I will say I do agree, it somehow got an intimate link between this object that's being created And I use the function store. We do not yet know how but there is a intimate link. Okay, but let's get fitting in those properties. Dan, actually, Adam, sorry about there.

[00:03:48]
I should not always specify it at the back, Adam. Go ahead. We've got a new user object. What are we adding immediately to it?
>> Will Sentance: A property called name.
>> Jeff: Yeah, and?
>> Will Sentance: And reassigning its value of the argument name, which is Will.
>> Jeff: Fantastic yeah, and then?

[00:04:07]
>> Will Sentance: The score is 3?
>> Jeff: Yeah, perfect okay, that object. What do we do with it? It's kind of seems that what we need. It's got the data and it linked somehow to our functions, but it's stuck inside our execution context. Matt, how we get it out. We're going to return the object exactly out into what global label Matt, use one fantastic.

[00:04:31]
And there it is with name: Will, score: [SOUND] 3. And any increment method on it? Exactly, but it does have somehow a link To this collection of functions up here. We'll see how in a moment, don't worry. Okay, we're back out in global we declare now user two.

[00:05:02]
It's going to be the result of another call to user, another running, another execution context for the running of user creator. This time with the argument of Tim, and five. What would it's output be? I'm just gonna sort of skip the execution context, know that we've gone inside and done all.

[00:05:27]
So what are we gonna end up with here, Matt, all the output that gets stored into user 2B?
>> Will Sentance: The object with the property name to the value of Tim. That does it property, score of the value 5, and an indelible link.
>> Jeff: Yeah, a mysterious indelible link, through to?

[00:05:43]
>> Will Sentance: The user function store.
>> Jeff: Through to the user function store.
>> Will Sentance: Look at that, they merged well, there. And you are through to the user function store. Okay, now we do our check. We're gonna do, let's do user1.increment, it's what I've got up here, user1.increment. Todd, you already know, it's over to you.

[00:06:11]
Todd, where's JavaScript gonna go looking for user1?
>> Jeff: In the global memory.
>> Will Sentance: Global memory, we find it?
>> Jeff: Yes.
>> Will Sentance: Yes we do, hold on.
>> Will Sentance: Yes we do. What are we looking for on that object?
>> Jeff: Increment.
>> Will Sentance: Increment, do we find it?
>> Jeff: Not immediately.

[00:06:29]
>> Will Sentance: No, it's not on that object. Do we give up?
>> Jeff: No.
>> Will Sentance: Where do we follow the purple?
>> Jeff: The indelible link.
>> Will Sentance: The indelible link, up to?
>> Jeff: User function.
>> Will Sentance: Function stole where we find on it-
>> Jeff: Increment.
>> Will Sentance: Increment, and we grab its code.

[00:06:43]
And people we're gonna start executing in a moment. So I want you all to see some interesting things about that function that we need to make sure are true. Because that function is gonna be able to be used on user 1, on user 2, on user 400. Before we do that though, let's understand how this link is actually stored.

[00:07:05]
It's made using auto.create. Whatever you pass in, we get that indelible link, that bond. How is it stored, the object, the reshoot, object.create does create an empty object, I stand by that. And Kayla was hinting, well hold on how is this link made? Well she is right to say that, is something that happens.

[00:07:29]
But it's under the hood that we can't see it. When we come to console I'll show you how in a second. A hidden property on this object.
>> Will Sentance: And it's a funny one, it's double underscore, proto double underscore, they call that dunderscore proto or dunder, proto dunder, the proto property, and it has stored in it or link to.

[00:08:04]
User function store. No, no, no, no. Returns that object into user 1, and behind the scenes, it still has its proto link up to user function store. This proto link, this chain connection from user 1 up to user function store. And it's also on here.
>> Will Sentance: We have a referent, a link, would actually literally see written in here.

[00:08:40]
User function store, a link to that object. Meaning, let's start, Braden. Braden, if I were doing user1.increment, talk me through. Where do I look for user one? Would we find it?
>> Jeff: Yes.
>> Will Sentance: Yeah, I do.
>> Will Sentance: This one is not working,] I find it yes, I do.

[00:09:07]
I look for the increment method on it. Do I find it?
>> Jeff: Not right away.
>> Will Sentance: No, but what does JavaScript do? I was actually gonna tell you, JavaScript has its quite remarkable, prototypal feature. That means when it does not find on the object A given property, method or data it does not panic.

[00:09:31]
Instead it goes straight to the __proto__ property not to be confused with prototype. You see that is wrong. So it's the __proto__ property and it looks at what is linking to, and is linking to the proto Up the prototype chain, but yeah, up the prototype chain that's okay phrasing.

[00:09:50]
Up the prototype chain or let's say through its proto-reference link up to where Bradon.
>> Jeff: The user function-
>> Will Sentance: The user function store. What do we find?
>> Jeff: Increment.
>> Will Sentance: Increment method, and we grab it And we create a brand new execution context for its code. I'm gonna come to that in a moment.

[00:10:15]
But for now let's have thumbs on this model where look people, ain't this beautiful? This user 1, this user 2. Neither of them have individual copies of our functions it would be totally redundant as a waste of memory space. We really good at a problem. That code is saved in memory and copies of it as it's wasted memory space.

[00:10:36]
Instead we have through the pro to hidden property or link up to a single copy or up to a single object where all those functions we want all these objects have access to are stored. And it's JavaScript prototype nature that objects when we look on them for a method we don't give up and we don't find it.

[00:10:58]
We first go check the proto property and head up to that object. That is its prototype was one of features is a feature like its lexical scope property is a feature like its global memory. Like it's a feature. It's a feature that objects have a connection to other objects if we set them to do so through their proto property.

[00:11:16]
And when JavaScript hits looking for something and the object doesn't find it, it does an error immediately. It goes and checks one layer up or maybe more. We'll see in a moment.