Original subtitles

Let's now consolidate the knowledge

that we got over the last two videos

in a nice diagram that brings everything together

that we know so far.

And everything starts

with the person the constructor function

that we've been developing.

Now, this constructor function has a prototype property

which is an object

and inside that object,

we defined the calcAge method

and person dot prototype itself

actually also has a reference back to person

which is the constructor property.

So, essentially person dot prototype dot constructor

is gonna point back to person itself.

Now remember, person dot prototype

is actually not the prototype of person

but of all the objects that are created

through the person function

and speaking of the created objects

let's now actually analyze how an object is created

using the new operator and the constructor function.

So, when we call a function,

any function with the new operator

the first thing that is gonna happen

is that a new empty object is created instantly.

Then the this keyboard and the function call

is set to the newly created object.

So, inside the function's execution context

this is now the new empty object

and that's why in the functions code

we set the name and birth year properties

on the this keyword

because doing so will ultimately set them on the new object.

So next comes the magical step.

So now the new object is linked

to the constructor functions prototype property.

So in this case, person dot prototype.

And this happens internally

by adding the underscore, underscore protal property

to the new object.

So, person dot prototype is now the new objects prototype

which is denoted in the underscore, underscore

proto property of Jonas.

So again, underscore proto always points

to an object prototype

and that is true for all objects in JavaScript.

Great.

And finally the new object is automatically returned

from the function unless

we explicitly return something else.

But in a constructor function like person

we usually never do that.

Okay, and with this the result of the new operator

and the person constructor function

is a new object that we just created programmatically

and that is now stored in the Jonas variable

and this whole process that I just explained

is how it works with function constructors

and also with ES6 classes

but not with the object dot create syntax

that we're gonna use later.

So just keep this in mind

once we read the object dot create lectures.

But anyway, why does this work this way

and why is this technique so powerful and useful?

and to answer that let's move on to the next line of code.

So, here we are attempting to call the calcAge function

on the jonas object.

However, JavaScript can actually not find

the calcAge function directly in the jonas object, right?

It is simply not there

and we already observed this behavior in the last lecture.

Remember that?

So, what happens now in this situation?

Well, if a property or a method cannot be found

in a certain object JavaScript will look into its prototype

and there it is.

So there is the calcAge function that we were looking for

and so JavaScript will simply use this one.

That's how the calcAge function can run correctly

and return a result.

And the behavior that we just described

is what we already called prototypal inheritance

or delegation.

So the jonas object inherited the calcAge method

from its prototype

or in other words it delegated the calcAge functionality

to its prototype.

Now, the beauty of this

is that we can create as many person objects as we like

and all of them will then inherit this method.

So we can call this calcAge method on all the person objects

without the method being directly attached

to all the objects themselves

and this is essential for code performance.

Just imagine that we had a 1,000 objects in the code

and if all of them would have to carry the calcAge function

around then that would certainly impact performance.

So instead, they can all simply use the calcAge function

from their common prototype, okay?

So that makes sense, right?

Now the fact that Jonas is connected to a prototype

and the ability of looking up methods and properties

in a prototype is what we call the prototype chain.

So the jonas object and it's prototype

basically form a prototype chain

but actually the prototype chain does not end here.

So let's understand the prototype chain a bit better

by zooming out and looking at the whole picture.

So, here is the diagram that we already had

with the person the function constructor

and its prototype property

and to jonas object linked to its prototype

via the underscore proto property,

so nothing new yet.

But now let's remember that person dot prototype itself

is also an object

and all objects in JavaScript have a prototype, right?

Therefore, person dot prototype itself

must also have a prototype.

And the prototype of person dot prototype

is object dot prototype.

Why is that?

Well, person dot prototype is just a simple object

which means that it has been built

by the built in object constructor function

and this is actually the function

that is called behind the scenes

whenever we create an object literal.

So just an object simply with curly braces.

So essentially the curly braces

are just like a shortcut to writing new object, okay?

But anyway, what matters here

is that person dot prototype itself

needs to have a prototype

and since it has been created

by the object constructor function

its prototype is gonna be object dot prototype.

It's the same logic as with the jonas object.

So, since jonas has been built by a person,

person dot prototype is the prototype of Jonas, all right?

Now this entire series of links

between the objects is what is called the prototype chain

and object dot prototype is usually the top

of the prototype chain

which means that it's prototype is null.

So it's underscore proto property will simply point to null

which then marks the end of the prototype chain.

So in a certain way the prototype chain

is very similar to the scope chain but with prototypes.

So, in the scope chain

whenever JavaScript can find a certain variable

in a certain scope,

it looks up into the next scope and a scope chain

and tries to find the variable there.

On the other hand in the prototype chain

whenever JavaScript can find a certain property

or method in a certain object

it's gonna look up into the next prototype

in the prototype chain

and see if it can find it there, okay?

So again the prototype chain is pretty similar

to the scope chain

but instead of working with scopes,

it works with properties and methods in objects, all right?

And now let's actually see another example

of a method lookup.

To do that we call the has own property method

on the jonas object.

So, just like in the previous slide,

JavaScript is gonna start

by trying to find the called method on the object itself.

But of course

it can't find the has own property method on Jonas.

So, according to how the prototype chain works,

it will then look into its prototype

which is person dot prototype.

Now, we didn't define any has own property method

there either

and so a JavaScript is not gonna find it there

and so therefore it will move up even further

in the prototype chain

and now look into object dot prototype

and object dot prototype does actually contain a bunch

of built in methods and has own property is one of them.

Great, so JavaScript can then take this one

and run it on the jonas object

as if has own property had been defined directly on Jonas.

And remember the method has not been copied

to the jonas object.

Instead, it simply inherited the method

from object dot prototype through the prototype chain.

Okay, and that's actually it.

That's all I have to tell you at this point.

So this is in a nutshell the magic of prototypes

and a prototype chain.

And this will actually become even more interesting

and useful once we add inheritance

between two different kinds of objects

or two different classes so to say.

For example, having a student class inherit

from a person class

just like we learned in one of the four pillars

of OOP, remember.

So there is a lot of exciting stuff ahead

and so let's move on.