Instructor: Now it's time
to finally start using prototypes.
And after this, you will feel
like a real pro developer,
believe me.
And we're gonna continue with the example
from the previous video.
Okay.
But now we're gonna talk about prototypes.
So actually, we talked about prototypes,
prototypal inheritance and delegation earlier already.
But how does all of that actually work?
Well, it can be summarized like this.
So, first each and every function in JavaScript
automatically has a property called prototype.
And that includes, of course, constructor functions.
Now every object that's created
by a certain constructor function
will get access to all the methods and properties
that we define on the constructors prototype property.
So just to visualize
in our case,
this would be person dot prototype.
So the prototype property
of the constructor function.
So again, as I was just saying,
all the objects that are created
through this constructor function here
will inherit,
so they will get access
to all the methods and properties
that are defined on this prototype property.
And so let's no actually add a method
to this prototype property.
And so, this is actually an object.
And so we can now say calcAge
and then we can simply set it
to this same function here,
so equal, and that's it.
Now we get some error here
and that's because I misspelled prototype.
So that's type right here.
And then let's actually take a look
at his prototype property
just for curiosity.
So that's not comma, of course, it's the dot.
And so here is that prototype property.
And so you see that right now
we already have the calcAge method in there.
So before it was kind of an empty object
so nevermind these two here.
So basically it was empty before
but now there is the calcAge method
already in here,
so this one that we just defined down here.
Alright.
And once again, remember how I said
that each object created
by this constructor function
will now get access to all the methods
of this prototype property.
And so of course,
also to calcAge.
And so we should be able to do this.
So Jonas, which is this object here
which was of course created
by this constructor function.
And so, calcAge.
And let's see.
And indeed, we get to the correct age here.
So it worked.
Great.
That's amazing.
So we can now use this method here
on the Jonas object
even though it is not really
on the object itself, right?
So if we check our Jonas here,
then you see that it contains of course
the birth year and the first name,
but it does not contain the calcAge method.
But still, we have access to it
because of prototypal inheritance.
Okay.
And of course the same is gonna work
for Matilda here,
and of course, also for the Jack object.
Beautiful.
So that effectively solves this problem
that we had before
when we added the calcAge method
directly to each of the objects, remember that?
So here we would have created a copy
of this method here
and attached it to every single object.
And so that's why we don't do this.
Instead, what we do is this.
Because now there exists only one copy
of this function.
So only one of them exists,
but then all of the objects that are created
using this constructor function
can basically reuse this function
on themselves.
And so, the disc keyword,
of course, in each of them
is as always set to the object
that is calling the method.
And so here that's Jonas
and here that's gonna be Matilda.
So just like we learned previously,
the disc keyword is set to the object
that is calling the method.
Now right.
So, in a nutshell, this is how we implement
very basic prototypal inheritance
in JavaScript and practice.
So we just observed, that the Jonas
and the Matilda objects
are kind of somehow connected to the person, right?
That's why they can have access to these methods
or in this case to just this method
that is located inside the prototype property of person.
But how and why does this actually work?
Well, it works because any object always
has access to the methods and properties
from its prototype.
And the prototype of Jonas and Matilda
is person dot prototype.
And we can actually confirm that
because each object has a special property
called a underscore underscore proto.
So like this.
Underscore underscore proto
and then again, underscore underscore.
So this looks a bit weird, but,
and this is just kind of how it works.
So let's take a look.
And so this is the prototype of Jonas.
It's not the prototype property
but it is simply the prototype, okay?
And so here again, we see the calcAge function
and that's why Jonas is able to use this.
So to prototype of the Jonas object
is essentially the prototype property
of the constructor function.
So let's quickly see that as well.
So we can check that.
So person dot prototype.
And so this should not be true,
and indeed it is.
All right?
But what I just said
sounded incredibly confusing, didn't it?
So shouldn't person dot prototype
be the prototype of person,
I mean
should this prototype property here
not be the prototype of person?
Well, actually, no.
So this is the confusing part.
So person dot prototype here
is actually not the prototype of person.
But instead, it is what's gonna be used
as the prototype of all the objects
that are created with the person constructor function.
So that's a subtle but important difference
that you need to keep in mind.
And, in fact, what I just said
that is confirmed by this comparison
that we just did here.
So we just saw that Jonas's prototype
which is this, is the prototype property
of the person constructor function.
And there are actually other built in methods
that we can use to prove this.
So on any object,
for example, object dot prototype,
we can test if this is a prototype of another object.
So we can call is prototype,
so is prototype
like this of and then Jonas.
And so this should also become true.
And indeed it is.
So this confirms one more time
that person dot prototype
is indeed the prototype of Jonas.
And the same for Matilda, of course as well.
But person dot prototype
is not the prototype of person.
So you see, it is false here.
So, this very common confusion
comes from bad naming of this property.
So the fact that it's called prototype
kind of implies that this is the prototype of person,
but as we just learned, it is actually not.
Probably shouldn't be called prototype
but instead something like prototype of linked objects
or something like this.
So if this makes it easier
you can think of the prototype property
as prototype of linked objects property.
Even though of course it's not called like this,
but this would be a more honest name.
So take some time to really understand
what the prototype of what object actually is here.
Now, anyway, where does this proto,
property here, on the Jonas object
actually come from?
Well, remember the new operator
that we talked about before,
well, it contains this step number three
which links the empty new object
to the prototype.
And so basically, it is this step number three
which will create this proto property.
So it creates this proto property
and it sets its value to the prototype property
of the function that is being called.
And so that's exactly what is written here, right?
So again, it sets the proto property
on the object to the prototype property
of the constructor function.
And so this is how JavaScript knows internally
that the Jonas object is connected
to person dot prototype.
And in fact, when we check out
the Jonas object here
we can indeed also see that property in here.
So it's also right here,
and if we open that up,
then you see exactly person dot prototype
which contains this calcAge function, all right?
So I'm spending a lot of time here
for you to really understand
what this proto property here is
and what the prototype of the constructor is
and how they are all linked
because this is one of the most important things,
and also one of the most difficult things
to understand in JavaScript.
But I hope that it's becoming increasingly clear
and there will also be a couple of diagrams
in the next video that will basically
bring all this knowledge together
in an easier to understand way.
So, by now you're probably sick
of hearing the word prototype
but I just wanted to quickly show you
that we can also set properties on the prototype.
And so not just methods.
So let's say person dot prototype,
dot species,
and so this is something
that all of the objects here
will have in common,
and so that's Homo Sapiens.
Now, right?
And so, if we now take a look at Jonas
and at Matilda also,
then we should see this property,
so the species on both of them
and actually not directly here
but indeed they will be here
in this prototype.
And so, we will be able to do Jonas dot species
and Matilda dot species.
And both of these objects will then inherit
so they will get access to this property
from the prototype.
So, you see, in both cases,
we indeed get Homo Sapiens.
Now however, since when we take a look
at these objects,
well, as we just saw this property is not really
directly in the object,
so it's not its own property.
So own properties are only the ones
that are declared directly on the object itself.
So, not including the inherited properties.
And actually in JavaScript, there is a way
of checking for that.
So, we can do Jonas
as own property.
So that's with a capital P here.
And so let's first check
for first name,
and indeed this object does have its own property
with this name
but now if we try species,
then that is gonna be false.
And again, that's because this property
is not really inside of the Jonas object.
It simply has access to it
because of its prototype.
So because it's in the prototype property of person.
So right here, right?
And sometimes, this method here
can be quite helpful in certain situations.
Now right, and that is probably enough
for one lecture.
And as I just mentioned earlier
in the next video
I'm gonna show you a nice diagram
of all of this.
So, stay tuned for that one.