Original subtitles

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.