Instructor: The JavaScript console in our browsers
is a very powerful tool to inspect objects
and the prototype chain.
So let's now quickly see how we can do that in practice.
So I'm first gonna show you how we can inspect
the object that we just created in the last lecture
right here in the console.
Because the console is not just to log some stuff
here into our console, like we've been doing,
but also to do more powerful stuff
like inspecting objects.
So let's first clear this, alright?
And now we simply have to write the name of our object.
So you see this is a Person object.
And then our name, yearOfBirth, and job.
But now if we hit this little arrow here, then
we get a lot of additional information about the object.
Alright, so first here we can see all the properties
that we added to this object.
So the job, the name and the yearOfBirth
that we associated to this very particular object.
So everything is correct here, right?
Now down here we have something called the proto.
And this is, in fact, the prototype of the john object
which is, and I'm sure you remember this,
the prototype property of the person constructor.
So let's take a look at that.
Okay, so here we have the calculateAge method
that we added to our prototype here, right?
So here we said Person.prototype.calculateAge.
And so we can see the calculateAge method here in the proto
which again is john's prototype, and therefore it's the
prototype property of the person function constructor.
And we also have the lastname property that we also added.
So let's also quickly take a look at Person.prototype.
Okay, and let's get some more space here for our console.
So we see that this is in fact the exact same thing, right?
This and this, here it looks the exact same way.
And just to prove you that John's prototype is in fact
the prototype property of the person
I can actually do it like this.
So proto
and then let's see what this
comparison operator now is gonna give us.
Okay, true.
So all this means is that in fact the prototype
of john is the prototype property of the
person function constructor.
But I'm sure that you know this already by now.
So let's go back to our john object here.
And actually I'm going to clear this and write it again.
Alright.
So this is a proto.
Now if we look at the prototype of john,
we see that there is also a prototype here, right?
So let's open that,
and here we see that
this is the prototype property of the object constructor.
So as I said, right, in the first lecture about
the prototype chain, all of the objects
are actually instances of the object object.
Right?
So let me open this again.
Okay, and so here we have a bunch of methods that are
associated to the prototype property of the object
function constructor.
So again, this one here is the prototype property
of the person function constructor.
And this here is the prototype property of the
object function constructor.
And that's because the person function constructor
is in fact an instance of the object function constructor.
Right?
And that's why we can see this whole
prototype chain here, right?
So as I said this console here is really useful
to visualize this prototype chain
and all of the prototypes that are in it.
So as we already know we have now access
to these methods here, right?
And that's right to our john object.
So thanks to the prototype chain on john,
we can use these exact methods that are here.
And now I'm going to use the hasOwn property method
just to show it to you
because it can be useful sometimes.
So we can use this method to ask, basically,
if an object has a property or not.
So we can do john.hasOwn property,
and then job for example.
And this is true.
Because this object has a property called job, right?
Now if we try this
with
the lastname property
then it's going to give us false.
And that is because this is not john's own property.
So this method only looks for own properties.
This is a property that we inherited from the prototype.
It's not really john's own property.
And that's why this gives false.
And this method can sometimes be quite useful.
And now there's another operator that I want to show you.
And this one is called instanceOf.
So I'm going to say john.instanceOf.Person.
And this is also like a question
because it will also give us true or false
and in this case, you can probably guess
that it's going to give us true.
So john is of course an instance of Person
because we created it through the
person function constructor.
And this one can also be useful sometimes.
Okay and with this we inspected our john object
and the prototype chain that we just created.
Now there's only one more thing that I want to show you
and that is to prove you again that
almost everything is an object.
So let me create an array here.
Just like this, just a very simple one.
And let's now get some information about it.
So if we just did X, not a lot is going to happen.
We cannot inspect this object right now.
So we need to use console.info
and now we will be able to look inside of this object.
And this is what we see.
So we see the elements and then we also see
this length property here, right?
And do you remember this length property?
We use it all the time, for example,
in our loops, right?
And so now you know where this actually comes from.
It used to look a bit like magic, right?
But of course it's not.
So it's always stored right here
in this array instance.
And that's why we can very simply use this property.
So something like this.
So X.length is 3
simply because this is stored
right into this array object.
Alright, and it gets even better, because
down here we can also see the prototype of this array
which of course is the array function constructor.
So this is another function constructor
that is built right into JavaScript,
and allows us to simply build arrays.
And here in its prototype property
we can see all of these methods
that we have already used before
like pop
and push here, right?
Or we used and shift as well.
So all these methods are right here
in the prototype property of the array.
And that's why we can use them.
So that you never wonder why we could simply call
the push method or something like this
on all of our arrays, so now you know.
It's because of the prototype chain.
So all the arrays that we ever create will always have
access to these methods because
they are stored in their prototype.
And that is how useful inheritance really is.
So I hope things are really starting
to make sense for you now.
So let's now move on.