Function.prototype and Array.prototype

[00:00:00]
>> Will Sentance: Let's also see on that same note, arrays and functions are also objects. So,they get all the access to the functions and prototypes. But, they also get extra goodies. Before we do this, I'm going to tell you that when JavaScript loads, there's another thing that it gets for free.

[00:00:20]
Which is, another function object combo with the label function. And this function object combo, yeah, it's a function hopefully. But of course it's therefore also, cuz a function object combo has all functions are. And don't get confused by the fact they've got out the case. They're just function object combos, but they're ones we get built in to JavaScript.

[00:00:50]
This function in its object form,
>> Will Sentance: Has what property, David?
>> David: Prototype.
>> Will Sentance: Prototype fantastic. Yeah people forgive me for these slides. This is a bit where I'm like, I just want to make sure you know about this. We're not gonna use this heavily, but I really want this to have like the core diagrammed version of what is the most like intricate, finicky parts of JavaScript, okay?

[00:01:19]
It also has an object.
>> Will Sentance: Sort on prototype. And that has in it, a whole bunch of functions. It's got toString. All the functions that we hope, any function will have access to. You know like, multiply by 2.call. But where is that call coming from? It's not my multiply by two object.

[00:01:45]
Multiply by 2.2 string, where's that two string coming from? Well, we'll play this out in a second. I just want to lay this out to start with. Two string, it's got cool on it, that functions have access to. Besides cool anyone who, anyone think of others?
>> David: Bind.

[00:02:00]
>> Will Sentance: Bind, fantastic, yeah. Who's to bind and there's apply. Yeah, I think that there's two others. It's very few others. Okay, so not everything in orange, everything surrounded by orange. We did not declare, it was put in there for us. As soon we turn Jarvis Word on. Okay, so now let's walk through this code knowing that these bits are here.

[00:02:32]
Line one, Elliott, what are doing?
>> Elliott: We are declaring a function multiplied by two.
>> Will Sentance: No, I've got no room in my memory. Okay, declaring a function multiply by two, help me out here man. It's a function.
>> Elliott: Object.
>> Will Sentance: Object combo exactly, and it's at this point like it's not, we got it.

[00:03:00]
Exactly, and the object, because it's a function-object, well, we know it has a prototype object as well, but we don't probably use that people, right? We don't use that bit unless we call 2 with a new keyword in front, which gives us our objects that have a link to that prototype object.

[00:03:18]
Otherwise we never use this bit. It's a bit redundant, it's kind of weird why we always have it there just in case. That if we ever were to try to run this function with a new keyword return out objects, which will always have a link to this object.

[00:03:28]
We would never otherwise use it I don't think maybe. Okay, now things get interesting. Multiply by 2.2 string. Multiply By2. [BLANK_AUDIO To String
>> Will Sentance: Hard line here. Terry, talk me through the lookup process.
>> Terry: Execution context for-
>> Will Sentance: Well, we've gotta find that thing first. I don't even know where it is.

[00:03:59]
Let's do the lookup process. Where's multiplyBy2?
>> Terry: In global.
>> Will Sentance: In global, excellent, Elliot which bit of mode [INAUDIBLE]. The function or the object?
>> Terry: The object.
>> Will Sentance: The object, see? .notation, it may see an execution on it on the end here, but it's not we've got to go find this thing whatever it is, two string.

[00:04:18]
We look for it on the associated object. Because when we use dot notation, we look, just like when we do multiply by 2.prototype, we'd find this empty object. We're gonna go multiply by 2.string and we're looking through the properties of multiply by two in its object form. Chris, do we see something called to string?

[00:04:37]
>> Chris: No.
>> Will Sentance: No. It's not there.
>> Will Sentance: Do we panic? It's an object, so what property does it automatically have, David?
>> Chris: Proto.
>> Will Sentance: Proto, all objects have _proto_. Now, where, David, do you think this _, _ is gonna refer off to?
>> David: To the console object?
>> Will Sentance: That would be thoughtful.

[00:05:02]
But this here, is a function object combo where we want this function to have access to certain bonus functions that are only available to functions, but not available to objects. So our object we made earlier, that points off to this Object, because we want it to have access to the objects specific methods, like has owned property.

[00:05:27]
But this, multiplied by two is a function that happens to have the attached object, and that means we want our function to have access to some things which are specific to functions, like call, bind, and apply into string. So David, do you wanna take another shot at where you think that proto, which object full of functions it might point off to.

[00:05:49]
>> David: The function.
>> Will Sentance: To the function.prototype object. Off it goes,
>> Will Sentance: To the function.prototype object, and that means. Seht told me through the actual lookup we're gonna have now, when I try and run toString on multiplyBy2, hoping to find there's a function called toString.
>> David: Can we just do it?

[00:06:12]
>> Will Sentance: Yeah, we did already. You told me through the whole way, you got me.
>> David: Okay.
>> Will Sentance: So up toString on the multiplyBy2 object, If I choose object, it doesn't have a function.
>> David: Yeah, doesn't find it.
>> Will Sentance: It looks in the prototype, which is-
>> David: It looks-

[00:06:26]
>> Will Sentance: Proto-
>> David: Which is linked to the functions.prototype.
>> Will Sentance: Functions.prototype object, where was it find?
>> David: toString.
>> Will Sentance: toString.
>> Will Sentance: I it grabs this code and runs it. Yeah.
>> Will Sentance: Function, well, what about, though, if I want to now use, this is so brutal. What if I now want to use my function that was available to object via the protocol reference to object.protoype?

[00:06:59]
Maybe now I don't get access to those Maybe I can't do multiplyBy2.hasOwn. Hm, maybe I can't do multiplyBy2.hasOwnProperty. I don't know what we're putting in, score. Maybe I can't do this line now. Let's see, raise your hand if you wanna take a shot at the journey of finding or not finding this.

[00:07:22]
Nick, go ahead, my friend.
>> Nick: So it looks for multiply by 2 in the memory.
>> Will Sentance: Finds it.
>> Nick: And then it looks for has own property in it.
>> Will Sentance: That has own property?
>> Nick: No.
>> Will Sentance: That has own property? No, but.
>> Nick: But it goes see what proto is referencing, which is the function prototype.

[00:07:42]
>> Will Sentance: Fantastic. I'm even coarse about saying that it's the function.prototype object, yeah.
>> Nick: .prototype object, and then looks for, has its own property in there.
>> Will Sentance: Is this it?
>> Nick: No, it's not there.
>> Will Sentance: But what do you think this object might have on it, hidden?
>> Nick: Its own proto, which references the-

[00:07:59]
>> Will Sentance: Perfect
>> Nick: Object.
>> Will Sentance: Can we give Nick a round of applause? That was excellent man. [APPLAUSE] One of the hardest things. Fantastic man, exactly that proto, which references up to this prototype object. Where what do we find?
>> Will Sentance: Property and we can use it. Now we see it's called a prototype chain.

[00:08:22]
It is JavaScripts prototypal nature that when it doesn't find something on the first object, it looks to its protoreference to another object, doesn't find it on that one, it's still checks the proto. What is this object? So we didn't, suppose we add and multiply by, I haven't done this before, but let's say multiply by 2., I don't know, increase.

[00:08:47]
Let's do the journey. multiplyBy2, look on this object version, cuz it's dot notation. Prototype's not it, there's no increase function. Look to its proto, which takes this other object full of functions. Increase, not there, increase, not there, increase, not there Load to its proto. Gosh, still doesn't have one called increase.

[00:09:04]
Does this have a proto? Well, of course it does, but what is its proto? Refer to null. Stop looking. There's no further up this chain. And so, then, we get the [SOUND] error. This method does not exist. Okay people, that is the under the hood, chain of proto references known as JavaScript's prototype nature.

[00:09:33]
That gives objects functions that would otherwise not been available on them through this referencing link up. And what we do, cuz we never lose access to these but-, well we can actually override the access to them but ,what we tend to do, is give out objects access through their proto to an object full of our own functions.

[00:09:57]
Knowing that that object full of functions will have it's own reference up to this object full of functions so we don't lose access. And we're gonna use that fact to allow us to create objects that the user would inherit. I don't love this term in JavaScript, but to get access to functions that were available, to let's say we have user objects, User 1, User 2, User 100.

[00:10:19]
That have certain properties and certain functions available to them, but now we want to create in our app, slightly more specific types of users called paid users. We have paid User 1, paid User 1 wants to have access to most of the functions that users had access to.

[00:10:34]
User1 had access to, User 20 had access to, but may also wanna have specific functions that only a paid user will get access to like you know, increase account balance. If you're not a paid user, you don't have an account balance. So increase the account balance, but it doesn't wanna lose the ability to also increase its score in our quiz game.

[00:10:52]
So maybe we can have functions that are only available to one type of object and then that set of functions would have a link up to another set of functions one layer up. So we get both of these, but we have other objects which only get access to that top layer of functions.

[00:11:10]
Okay, and that is subclassing.