Hello welcome to a video about prototypes So first. I should say right now. You should probably turn this off and go [to] something else because I'm about two particular Things I don't really entirely understand and also a little bit You know you could kind of make the arguments obsolete or a little passe or you know why aren't you talking about yet, six? The new verb or this epiphany sounds it's very long the new version of Javascript So what I'm going to attempt to do I made a coding challenge earlier today? You can go a link to it [from] this video. It was a coding challenge I'm just going to show it to you actually should have had this up it was a creating the word to train Out of little dots, and then as I move the mouse [around] the little dots would move and then they would come back So I made this coding challenge, and I used a particular bit of syntax where I created objects and attached methods or functions To the objects prototype and so I wanted to try to make a video to at least cover what is a prototype in Javascript and Why is it kind of relevant or why might you use it and how does it relate to this concept of inheritance and loop? maybe also this concept of Polymorphism, okay, whatever. I got [to] workshop this so this could use some work, but I am trying try new stuff new materials Yeah, my doing not so great, okay So what is the project so first I'm going to just sort of work? I'm going to close this and I'm going to come to some code and in this code I'm just going to I'm going to write a constructor function I could probably start further back But I'm coming with [some] through a baseline of maybe you've watched some of my other tutorials And you've seen me create objects with a constructor function so a constructor function, and I will talk about yet six and classes towards the end of this video, so Before you start typing in your complaints Why aren't you mentioning year six in classes okay and function and I'm going [to] say there's a particle I'm going to use the particle actually [night] none It's like particle a function particle this dot X equals 100 this dot Y equals 99 So I'm the idea this constructor function is I can create an object that has Those two properties associated with it, an x property and a y property and this keyword what Javascript knows? that if I ever say, var p equals new Particle the New Keywords Indicates to Javascript that aha that function right that you wrote is not a regular [b]. It all functions are the thing [if] It's a function. It's a function if the function if the function is the function it's a function but functions can be executed in a slightly different way as constructor function if you [use] the New Keyword the New Keyword says execute that function as a constructor function meaning make a new object and assign that object to the [keyword] this So it's binding the context of the code that's happening inside that function to the keyword this point Oh, I think we need a whole video about the keyword this I think I've covered it mentioned it before But this is this keyword of Javascript that can be Kind of pointed through the current context point of the different things based on what you're doing and here I want to make a new object, so I need something to point to it. I'm going to use this Okay, so I'm making a new object Now let me actually do this rather instead of in the code. Let me actually just go to the Javascript console itself and I've got that code loaded in the background so I can do things like [var] [p] equals new particle and We're going to see now if I look closely at that object there it is It's a particle object and has [an] x property and a wide property What else does it have well it has this? Proto property we need to object, so let's come back to that in a moment. Okay. [we're] to come back to that in a moment Hold on hold on okay now. [I'm] going to go and I'm going to say something like this dot show equals function [yes] equals function You know this dot point? Oh? Sorry, I held off my case I'm in P5 So I'm going to call the point function this out x this not y so like I'm going to add a function to object Where I draw it as a point So and actually what I'm going to do is I would say var p Just one wants to keep typing on the console P equals new particle So now I'm going to load reload the page. I'm [going] [to] type P again So now I have come on well, [okay] something went wrong [here]. Oh there it is. Sorry It's there so now it has three properties show which is a function. You can sort of see that here And there's other stuff associated with that. Oh so much to talk about we could be here forever We won't talk about it all and x property in a y property now. Let's think about this for a second I'm going to make another particle bar P2 equals New Particle P2 now [both] of these particles of oh boy, I've got this computer here Okay both of these particles have An x and a y proper in this make sense right they should each [have] their own X&Y property because I might say p 2 x plus plus right and now p 2 Has its x property is its x has moved to 101 but I don't want p to have moved I want to be able to treat those properties of it Individually those for this data of these particles where they live on the screen, so it makes a lot of sense that [those] would be Attached to the new object that was made in the constructor function, but let's think about this Do they really each need their own? individual show function Couldn't I just have a show function That was just kind of living somewhere that I could say hey Particles when it's time to show Go and grab that function you could both use the same show function because you're both going to be displayed as a point you'll use [your] own data to show yourself at different places on the screen maybe with different colors But you don't actually need each new show function and right now when I make two particles to each get their own X&Y Which they should and they each get their own show function which works, but is a little bit unnecessary so how can I possibly make this a bit more efficient and I'm kind of backing into the concept of Like this is normally where you would start, but this is one reason. Why it's useful I can instead say forget about having a function defined here. I Can write some very strange-looking code particle dot prototype dot show equals function? So now and I'm going to do the same thing. I'm [just] going to put that code in there and Now we are going to look at what does this particle look like in the console p The particle now has an excellent. What happened to the show function It's down here. [oh] Boy, so now we've now we've lost it, and I think I need the white support This is the moment where I think we need the white board Okay, I'm over here at the white Board I'm walking very awkwardly not so sure what I'm going to draw yet I'm feeling a little nervous here because I don't know this is where it gets a little bit tricky So what I'm suggesting here is this object [all]? Objects [P1] has an x and has a y now I could also add a show function But I could also just add a prototype and that prototype is going to point to Particle dot prototype and Particles Prototype has a show function So this is kind of what's often referred to as the prototype chain so it's big although the chain is it's very long yet [I] really want to show how this can then be changed further and further and further so this is The [pokes] and that's worth getting show, so now if I say P2 and I have an x and a y and a prototype this is also pointing to particles a prototype so if I say P1 dot show It looks up is it in here somewhere Nope, if it was it would execute the show something I could override within the prototype by having this part of on its own Will show function. I don't know why I would do that, but you could and maybe you can [take] [it] why not? [here] go look in the prototype there it [is] so this object is going to get functions that are beyond the program now Strangely, not what I'm going to do for a brief moment is leave this here and show you a reason why this can actually be Incredibly powerful That's the right word But incredibly useful as a Javascript programmer when you're using existing javascript objects that come from other libraries so for example Am I over here now? Yes for example. Let's say you you want to use okay a good example is this array is a good example of this but I'm going to use the the P5 vector object so let's say you you have a You have a vector. I'm going to say I'm going to make this a global variable just in case I don't look at it in the console V equals create vector You know one cut three comma four Now V has functions like and so if I go to the console and hit refresh I can say V mag The magnitude of that vector is 5 it's a 3 4 5 triangle actually if you look at the sides and the hypotenuse That's the magnitude of that vector now. What if I wanted to say? V dot. What is the magnitude actually typed is the function? What if I wanted to just? double the values of that vector so I know I could say V multiplied by 2 That's a [ways] that you can actually double the values of a vector And you can see now it's 6 and 8 instead of 3 and 4 but what if I wanted I feel like the vector object Because I'm going to do this a lot by program I just want to be able to say V double well of course I'm going to get error that says uncaught type error V double where is the multiply function Let's look at the V let's look at P5 vector Right let's look here all of these functions are in P5 dot vector Prototype all of that is down here. This is [all] [the] stuff listing. What's in the prototype? So and I got to talk about what this underscore proto thing is but down the things listed below are part of the prototype these are the properties specific to that actual object instance the object itself not part of the prototype which is sort of a shared amount of functions for all objects that are created from that prototype So what if I want to add something to this well? This is not something you could normally do in a lot of other programming environments Oh, I got this class or this [object] or this thing. I'm just going to modify it. It's a programmer No problem. Well guess what Javascript you can I could say? P5 Vector dot Prototype Equals. Oh, sorry dot double Equals function, and what would I do in that function? I could say this dot x because whatever object gets called look at that object x property x equals to This dot y X equals to this dot z because the vectors actually have three components, so now I've actually added I Modified the p5.js library by messing with by adding something to P5 vectors protists that any vector [anytime] in my code in this sketch. Will always now suddenly Have a double function And we can see that because if I hit refresh and I type V and I look at all the functions available in the prototype Suddenly there's a function called double right there. It wasn't there before So I've mostly wrapped up this first video on perfect Yeah, there's lots of little missing pieces here lots of little gaps to fill in I want to and I'm going to do a [follow-up] one which goes a little deeper into Inheritance this idea of [inheritance] and then another one which goes deeper than this other concept known as polymorphism But let's just one thing that we need to figure out here is what was that underscore? proto thing So there's something in Javascript called the prototype chain and right here. I made these objects calling the particle is a constructor function and this assigned actually the this this this made these objects that have the properties x and y with It's from Particle dot prototype But that underscore proto is referring [to] a property of the prototype which is a Pointer in a way a reference up the prototype [chain] and what this actually points to is something called object dot prototype Everything in Javascript everything everything everything arrays functions Everything except for some primitive bar x equals five numbers And you know undefined everything is really an object and all objects Ultimately have a selection of top of the prototype chain where you can mess [around] with all this stuff by like Creating objects with null and like destroying the prototype, but that's a little less practical or relevant to this video all objects if you go all the way up The Prototype chain go get object prototype and there are methods here like there are methods like has own Property which is actually this is [actually] a really easy Interesting thing to look at has own property let us just investigate this function has own property for [a] second so I can say P1 Dot has own property because it doesn't that dot property has a property isn't here [oh], let's look up the [prototype] [change] the purpose after outer tech so it's not there. Oh, let's go to object red project Oh, it's there I can execute that function. Let's look what that function does. It's kind of interesting It's very useful so I'm going to say P1 Hook oh, just p. Sorry p this incidentally This object prototype is particle Dr.. Auto type, and we can see the function thing. I look it result, so it's automatic property of the prototype Constructor that is set automatically to that particle constructor function That's what happens when you say new the new Keyword says the particles prototype constructor Is that function new particle so you can see here Particles prototype? proto Pointer points to object [dot] prototype and we could see look these are the other functions that come from object dot prototypes like has own property [so] Let me show it what I mean by that I can say p Like let's say [I] say piz well that's undefined. It doesn't exist. It's not a property of particle, and it's [not-it's] So I could say p. Dot has own property z False it is not a property. It's not a property of p. But has own property is a little bit It's not just easy to properties. It's something that you could say that gives you a valid result. What if I say P looks at p has own property x I should get true right look p has a property x Correct but what remember particle I can say p show right that's a function. I could say p dot has own property show False why did I get false the reason why I got false is because Show is a property that's been the prototype So this is a way you could detect if the property is something specific. Just only that is like an individual property of that object Instance or something that's somewhere else in the prototype chain And this is actually useful time if you want to iterate over all the properties [of] an object even with the prototype [chain] you can determine if it's like something [you] want to ignore because it [actually] comes from object prototype because it's Not a has own property of the object itself so I kind of went out a little bit of it I dress in there, but hopefully this lets you see, how do we find something up that? prototype Chain so This is a little bit of what a prototype is. I'm sure I miss p I never I don't know if I like explicitly defined it kind of back into it showing its how you use it and how it's Relevant and where you find it in the console sure I missed a lot of pieces here Which I'll come back to but what I want to look at is what if I want to make other objects? What if I want to put something else what if I want to have? So let's say I have a generic particle object that has all of the physics basic physics of a world that's going to inhabit and what I ultimately want to do is I want to have turtles and fish and Bees and all different kinds of creatures that have lots of their own functions and properties, but they get all their physics stuff from say a Generic Particle object, [how] can I have a you know a turtle? dot prototype Which have a lot of stuff? Turtle, but has all the physics from particle that prototypes that has all the functions from [object-oriented] How can I do something called inheritance? How can I have objects inherit from other objects that I'm defining? Through prototypical inheritance in Javascript, so that's going to be in the next video, but might not come out for a little bit But it will come out eventually maybe you're watching this in the future and they're all there and are I believe them because these videos or disaster, but But so look for it it might be there now. I should mention one again [once] again that what I'm showing, you is a part of the Javascript language from the version that is informally known as Es6 so there's a consortium [Emc] a script Blabbity blah that Determines and specs out the [Javascript] language the interesting complex topic of how that's done and who has a voice there which I think we a separate discussion, but The new and it's actually not even that new at this point But it just you know there's still some browsers don't support it the newest version of Javascript Es6 has a different model and syntax [for] [this] involving something called class and If you have programs as I have in Java or other Classical programming environments, so to speak this is more of like a classical model of inheritance And there's a key bump, so I some point I also want to look at that so in this continuing series But first I want to figure out this prototype stuff I want to get [inherit] also talk about this thing called polymorphism, and I'll show you some examples [that] make use of it, okay thanks for watching this particular video, and I will see you in a future one about prototypes and inheritance
