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.