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