Prototype Chain

[00:00:00]
>> Will Sentance: All right. Now let's do our all important check. Let's do our all important check. Here it is our vital check. Can we call our functionality on our object that has the data of the user? User 1 here could be user 2. Can we do it? Because the function definitely don't look like it's on user 1.

[00:00:31]
>> Speaker 2: Yeah, that's your life then.
>> Will Sentance: We got the pink line the pink line makes it possible Seth. Tell me the journey. Tell me the lookup journey of JavaScript where is user 1.
>> Speaker 2: User 1 is in globals.
>> Will Sentance: Global memory, global memory, there it is, hooray. What are we looking for on it?

[00:00:47]
>> Speaker 2: Increment.
>> Will Sentance: Increment, do we have it?
>> Speaker 2: We're gonna find it by reference.
>> Will Sentance: But do we have it on as a property direct? No, so JavaScript goes and looks up the pink line to?
>> Speaker 2: The user functions store.
>> Will Sentance: User functions store where it finds?
>> Speaker 2: Increment.

[00:01:03]
>> Will Sentance: Beautiful. Okay, folk, let's talk about how that bond is made because it really would be the worse session on front end masters ever if we just left it as the pink line. The pink line leads up. So how actually is made is this people. As soon as you declare new user and as soon as it returns on an object using object.create, it sets a hidden property.

[00:01:27]
I will stand by what I said. It is an empty object that gets stored in new user. But you will see an empty object stored in new user and then you add the name, score, property, return. There is no increment property on here. And if only these two properties that are locked in but, there are hidden properties and objects that give them bonus features, and you can see them.

[00:01:53]
As soon as you declare a new user and you assign it that empty object, you press that little down arrow. In the Chrome dev tools, you see a bunch of kinda light gray properties. One of them-
>> Will Sentance: Is dunderscore, double underscore, proto double underscore. Now in the spec actually of JavaScript.

[00:02:17]
That means the underlying design of JavaScript, the run time writing of Java, they call it square bracket, square bracket, prototype, square bracket, square bracket. Which is even more badly named as we'll see later one when there is actually a property called prototype. So this is a terrible name, proto.

[00:02:33]
The spec name was even worse named. So,anyway, whatever. This is a hidden property, the pink stuff is a hidden properties, and under score proto, dunder score will have a little link to where, Seth?
>> Speaker 3: The the user function storage.
>> Will Sentance: To user function storage and what we passed into object.create that gave us the empty object with the hidden reference up.

[00:02:58]
And note people, yes, it says user function store. Do not think that means we're copying user function store onto here. We're just saying, make a link up to it. Make a reference to where this object is stored in memory. Such that when we return out this object, it brings with it its little hidden bond.

[00:03:20]
Up to, through the dunderscore proto dunderscore it's bond up to user function score. Same thing on this object.
>> Will Sentance: It's dunderscore proto dunderscore bond up. So who would like to talk through the lookup process here now, in terms of our proto reference. David, I knew from the look in your eyes that you wanted to user 1, where is it?

[00:03:48]
>> Speaker 4: In the global skull.
>> Will Sentance: In, let's call it global memory, the reason is, scoping in JavaScript has a slightly more complex aspect with it's static scoping, I see hard parts. So I prefer to use the term, how many times am I allowed to pitch other hard parts videos?

[00:04:07]
>> Speaker 5: As many as you like.
>> Will Sentance: As many as I like. See, hard parts closure. So I prefer to use memory, where we're storing. And we'll find user 1. Beautiful. And then David, what are we looking for in user 1? What does JavaScript look for in user 1?

[00:04:23]
>> Speaker 6: Increments.
>> Will Sentance: Does it find it? It does not. Does it panic? Does it error at this point?
>> Speaker 6: In IE, yes.
>> Will Sentance: Does it? I don't know, maybe. Perhaps. That would be pretty tragic if that were true. Fundamental feature of JavaScript. Instead, it uses JavaScript. And I want to call it this, it's prototypal nature.

[00:04:43]
It's prototypal feature. It is a feature of JavaScript that means when JavaScript does not find the method on the object directly, it does not immediately give up. Instead it goes and looks on what hidden property, David?
>> Speaker 7: Proto.
>> Will Sentance: The proto property. Not prototype, we'll see that later on a totally different thing.

[00:05:02]
The proto property. The dunder proto dunder. The dunderscore proto dunderscore. The double underscore proto double underscore. And it sees there a little link up to what?
>> Speaker 7: User, user incriment store.
>> Will Sentance: User function store, where we find what?
>> Speaker 7: Incriment.
>> Will Sentance: The incriment function. We can then grab its code, create an execution context to execute it.

[00:05:26]
I mean, we're gonna see a ton of complexity laid on top of this. But this is fundamentally a good solution. This hidden feature of JavaScript known as its prototypal nature, that means we cannot give up when we don't find something on an object directly, but instead go looking elsewhere, turns out to be profoundly useful.

[00:05:49]
And whereas other hard parts have lots of new concepts, we're gonna see that really in OOP, hard parts, this is it, this is the underlying feature. This is JavaScript's Prototypal nature. Now, it's gonna turn out, it gets super complicated as we link more objects to more objects, as we want to save ourselves manually making this bond and instead use some keywords that automate the making of that bond.

[00:06:18]
And then we got it to the clean up that code and it gets pretty complicated around the new or the class keywords. But fundamentally under the hood it's kind of underwhelming almost. This is it. We're gonna see nothing else a day. Everything else we face today is gonna be JavaScript trying to clean up this process and in doing so create more need for understanding, if that makes sense.

[00:06:42]
So that it looks cleaner, but to actually use it effectively? We're gonna need to, they're gonna add little bonus bits here and there which make it more complicated, more and more complicated. It will look cleaner and cleaner, but under the hood, it's more and more complicated. We're getting on that full journey Today.

[00:06:57]
All right, so we have successfully found our function even though it is not on our object. Lets have thumbs at this point. No idea what happened here. I am clear. I have clarifications. Everybody's thumbs out. It's absolutely okay to have clarifications. Terry, is that a clarification? Or a weak thumb?

[00:07:19]
>> Speaker 7: Weak thumb.
>> Will Sentance: Okay, all right, problems with this one. There are no problems. This is beautiful. Maybe it's a little bit long winded folk. Once you start thinking about your application as objects that combine the relevant data. Name score of a user with the relevant functionality, the increment module function.

[00:07:42]
In reality, there's a lot of those. You start doing that for everything. Even if, for example, you had one, these instances I don't love that name is not really in the classic sense of instance. Even if you have one object requires of example or one of a thing.

[00:08:00]
So suppose you have in your app. You have one app, right? One quiz game board. Even if you just doing that you're probably still going to make it as an object to capture the data over the dimensions of the board the color of the board, whatever. Some details of it, and the associated functionality.

[00:08:20]
Maybe render the board. You're still gonna capture that as an object, and therefore create a function that will return that object out with the data, and then the functionality off in some shared function store. Even though you're only gonna have one of them. Not like users where you may have 40 players at the same time, 1,000 players at the same time, you just may only have one of them but you're still going to produce that object with it's data ar functionality together from a function.

[00:08:46]
So I guess this process of hand crafting an object, hand returning it out from a function, hand making the bond to a set of shared functions. I guess that becomes a little bit repetitive. If you saw a thing about everything you do is objects with right data and functionality bundled together.

[00:09:12]
With the right data and the right functionality bonded together. And you're gonna produce them from functions, you're making a lot of objects by hand. You're making a lot, you're writing the creation of the object with a local label, newUser in this case. The returning of that object out, the bond to the shared functions.

[00:09:29]
You're doing that by hand, you're writing out a lot. Other languages say, ah-ah, no need. Other languages say, do not fear, we're gonna give you functions that just make you objects that you can then add properties to. JavaScript doesn't, well it does now, didn't use to give us that.

[00:09:44]
Instead it gave us a keyword that did that for us. Very strange design decision, but it is what it is. So there's no fundamental problems with this approach. I feel like I've read some people saying this is kind of like the sophisticated approach. And in reality, this is what we're gonna discover one of those key words in JavaScript, a new key word, actually is doing under the hood.

[00:10:11]
But I guess maybe it's a little long winded. You create an object every single time, you hand craft it, a bond to some functions every single time, and you return that object every time. But it's super sophisticated. But JavaScript's designers said, okay, we're gonna give you a tool that will automate these pieces.

[00:10:32]
The making of the object, the crafting of the bond to the shared functions, and the returning of the object data. We're gonna give you a three letter word that will automate that process for you. That three letter word is, everyone together New.
>> Speaker 8: New, that wasn't everybody together, but nevertheless.