Let's now check out prototypal inheritance
and the prototype chain on built in objects
such as arrays.
But actually let's start this lecture
by inspecting some of the stuff
that we just talked about in the last lecture.
And we will keep using this person example
that we have been building.
So let's start by taking a look at Jonas._ _ proto
And we already know that this is the prototype of Jonas
which is exactly the prototype property of person.
And so therefore it is this object
which contains the Clock H-method that we defined earlier.
So up here and also this property
so this species property, but now let's actually move up
in the prototype chain and essentially take a look
at the prototype of Jonas's prototype.
And do you remember
from the last video, what that's gonna be?
Well, let's see.
And it is indeed the prototype property of object.
So that's why you can see
that constructor is the object here.
And then right away, we see this method
that we actually already studied in the last video.
So this has own property.
And so this is the reason why we can do this.
So why we can call has own property
on Jonas like we did here in one of the earlier videos.
So again, we learned in the last lecture that this works
because of the prototype chain
and in particular,
because this method here is in this prototype
of Jonas's prototype.
And so, yeah, that's this object
that we are inspecting right now.
All right.
Okay, but let's take this one step further
and check out the prototype
of the prototype
of the prototype.
And do you remember what this one is?
That's right.
It is no.
And so that's because object.prototype is usually the top
of the scope chain.
So this one here right?
So this one is gonna be object.prototype.
And so that's the top of
the prototype chain.
Okay.
Now we can also take a look
at that strange constructor property
that we also saw earlier.
So remember person.prototype itself
has a constructor property
which as we said, will point back to the person itself.
So constructor, like this.
And so here we actually get the function itself.
Now, if we want to inspect that function here
we need to use console.dir
And so here, indeed
we see that the constructor property points back at person.
So that's this.
Now to make things a bit more complicated even,
let's now take a look at the prototype of a function.
So any function of course is also an object.
And so therefore it also has a prototype
but maybe this is a bit too confusing.
So let's just leave it here.
So I will first show you the prototype of arrays
and maybe then we can move a bit further to functions.
So actually let's do that now.
So let's create an array
just like with any random numbers.
So the values here don't matter at all.
All I am interested in
is now to take a look at the proto property.
So the prototype of the array.
So let's see.
And here it is.
So this is the prototype of array
and you see that here
we have all these methods that we already know.
So we have fill, we have filter,
find, find index and all of these methods that we studied
in one of the earlier sections.
And so this is the reason why all the arrays get access
to all of these methods.
So each array
does of course not contain all of these methods
but instead, each array will inherit these methods
from its prototype.
Am I right?
And we can also check out
that this prototype has got to be
exactly array which is the constructor function.prototype.
So one more time, the prototype property
of the constructor is gonna be the prototype
of all the objects created by that constructor.
And so let's see, and it is true indeed.
And just like an object
using this shorthand, basically ,
is the same as using new array.
And so therefore whenever we create an array
like this, it is indeed created by the array constructor.
And so that's why all of this works behind the scenes.
But of course, this is not yet the end
of the prototype chain as we saw in the last video.
So let's see.
And so now we are back to having object dot prototype.
And you see.
So this again now has on property
and then all of these methods
here that are available for objects.
And one more time,
that is simply because the prototype itself here
is an object.
And so any object has access to all of these methods.
All right, now we would be able to
see the exact same thing also directly in the console.
So if I check out the array here
and open it, then here in the bottom
you will see that we have the prototype property right here.
So if we click that, then here, one more time
we get all these array methods that we already know.
Okay.
And if we check the documentation on MDN
for example, for filter, then you see
that actually the name
of the method is array.prototype.filter.
And that is because this filter method, does of course,
live in the prototype property of the array constructor.
So one more time you can see
that the prototypal inheritance is really a mechanism
for reusing code.
So all of these built-in methods here
have to exist only once somewhere in the JavaScript engine
and then all the arrays in our code
get access to the functions
through the prototype chain and prototypal inheritance.
Great.
So let's actually take this one step further.
So we know at this point,
that any array inherits all their methods
from it's a prototype.
And therefore we can use that knowledge
to extend the functionality of arrays even further.
So all we would have to do is to say array.prototype.
And then here we can add any new method
to this prototype and all the arrays will then inherit it.
So let's say that we wanted to create a method
which returns all the unique elements of an array.
So let's add a method called unique.
So we set the unique property to a function
and then to get the unique values of an array
all we have to do is to create a new set
and pass the array in there.
And this keyboard is going to be the array
on which this method will be called.
And so now we just need to put this
into an array
and spread it like this,
as we have already done multiple times before.
And so we can now use that.
So array.unique,
and this should now return an array
with only the unique values.
While we don't have a lot of duplicates here
let's add another six here and maybe another nine.
And so let's see what happens
and indeed that worked.
Beautiful.
So just to recap, we added a new method
to the prototype property of the array constructor.
And so therefore now all arrays will inherit this method.
And so we can then call that method
on any array that we want.
However, what we just did here.
So extending the prototype
of a built-in object is generally not a good idea.
I mean if you're working just on a small project on your own
then I guess you could do this,
but really don't get into the habit of doing this
for multiple reasons.
The first reason is that the next version of JavaScript
might add a method with the same name
that we are adding, for example this one here,
but it might work in a different way.
And so your code will then use that new method
which, remember, works differently.
And then that will probably break your code.
And the second reason why you shouldn't do this
is because when you work on a team of developers,
then this is really gonna be a bad idea
because if multiple developers implement the same method
with a different name
then that's just going to create so many bugs
that it's just not worth doing this.
So it's just a nice and fun experiment
but in practice, you should probably not do it.
Now for a little bit of fun to finish this video.
Let's take a look
at some more built-in objects here in the console.
So for example, we can select this DOM element here.
And so let's do that.
This H1.
So that's document.querySelector
H1,
and we already know that all the DOM elements
are behind the scenes objects.
And so let's take a look at this object.
Well, that doesn't really work.
So that just gives us the object.
So let's try a console.dir
on this H1.
And so now we get the actual object.
So here we have all this different stuff
and all these properties
and methods that we already worked with.
But what I'm interested in here is the prototype
and you see that the prototype is an HTML heading element.
All right?
And so that itself will contain a lot of different stuff,
one more time.
So let's scroll all the way down.
And so this is now an HTML element.
And do you remember these names here from somewhere?
Well, these are exactly the types of objects
that we talked about in one of the first lectures
in the DOM section.
Remember that?
So we had this big diagram
with all these different types of elements.
And so now here we can actually inspect them.
And so behind the scenes
these different elements are really different
like constructor functions.
So if we go down here
we should now see element
and indeed, here it is.
And so again,
you can recall that diagram that we inspected there.
And then you will remember
that HTML element was a child element of element
and element itself was a child of node, right?
And so therefore the prototype of element
is gonna be node.
So if we scroll all the way down here
then you see indeed node, and now this one is event target.
And so you'll see, this is a huge, huge prototype chain.
And only now we are at the end.
And so the end is an object
and that's it.
So this prototype chain has easily six or seven levels.
And so you see that it can go really, really deep.
So if you want to go and check this out by yourself
then that would probably be a really nice exercise.
And finally, let's just also
console.dir some random function.
So the function doesn't matter.
I just want to be able to look at the function.
Okay.
And so, as I mentioned a bit earlier in this video
the function itself is also an object.
And so therefore it also has a prototype.
And in this case to prototype will then contain the methods
that we have used previously on functions.
So that's apply, bind and call, remember.
And so once again
this is the reason why we can actually
call methods on functions.
It's because they are objects and objects have prototypes.
And in this case, this function prototype.
So you can spend a lot more time
if you're really interested in exploring all of this.
But once you think you have a good understanding
of all the previous lectures
then you can move on to the next video
which is gonna be the first coding challenge
of this section.