So that in the last lecture we saw that we could create a constructor function like this, then call
that by saying new user and passing in these different values.
Then we attach those values as properties inside that constructor.
But we also added this method inside the constructor as well.
But defining methods inside the constructor like this is not the best way to add them.
Instead, it's better to add them onto the prototype.
So let's talk about what that is, first of all.
So if we create any kind of object in JavaScript, like a new date or an object literal or an array,
then all of the methods that we can use on that object will be inside the faded out prototype property.
We've seen this briefly before, but let me show you again.
If I say const nums and set that equal to some kind of array, I'm going to say one, two, three,
four and five.
Then if we call Nums and expand this now, we can see all of the methods available to us for this array
inside this faded out proto property.
And no matter what object we use, the methods should be inside this proto property.
Now, if we want to use one of these methods, we don't then say nums dot underscore, underscore,
proto underscore, underscore, dot, whatever the method is.
For example find or filter we just say nums dot filter because JavaScript automatically proxies all
of the methods that we can use up onto the root level of the object.
So I could say nums dot filter and then do something inside here for every item in the array.
Obviously I'm not going to do this now, but this is what we could do.
We don't have to say dot underscore, underscore, proto underscore, underscore, dot.
That's not how we do it.
It's just that all the methods available to us are listed inside this proto property.
Now if we go back up to the top where we log out our users, which we created using this constructor
function, if we expand one of these, we can see the login function is not actually stored inside proto.
It's stored directly on the object and that's because we defined that directly in the constructor.
So it would be better if we could define it so that it was stored inside this proto property.
And to do that we have to store the method on the prototype.
Now when we defined methods in a class, JavaScript automatically took those methods and added them
inside this proto property.
So that's what we need to do when we're not using classes.
We need to figure out a way to take our methods and store them inside this proto property.
But before we see how to do that, let's just talk a little bit more about what this proto property
actually is and also what a prototype is in JavaScript as well.
So we know now that we want to attach our methods to the proto property, but why exactly do we want
to do this?
Well, first of all, we need to understand what a prototype in JavaScript is.
So every type of object that we create in JavaScript has a prototype, an array object has a prototype
object literals have one date objects, have a prototype.
Even every custom object type that we create, like our user objects, have a prototype.
Now, those prototypes for all of those different kinds of objects are like toolbelts for those objects.
They contain all of the methods that those types of objects can access.
For example, a date prototype contains methods like get day, get month, get date and many more.
All the methods available to a date object.
They're all stored on the date prototype.
The array prototype contains all the array methods, so reverse map filter, etcetera.
Now when we create new array objects, the properties of those arrays are stored directly on the instances
themselves of those arrays, like the length.
But the methods for both of those arrays are not stored directly on the array objects.
They're stored on the array prototype, which makes sense because they both have the same methods.
They're not different.
It doesn't make sense to store them on every array because every array shares exactly the same methods.
So all the array methods are stored once in this central place on the array prototype.
Now, we've seen that every object type like dates or arrays has this proto property which is faded
out.
Now if we expand that, we see all the methods available to that object.
When we expand it on an array, we're going to see all the methods available to an array object, and
this will list all of the methods stored on the array prototype.
And that's the key.
They're stored on the prototype.
They're not stored on each individual array inside the proto property.
The proto property doesn't store the methods here.
All it does is just list the available methods to the array object which are stored on the array prototype.
So what this proto property does is actually point to the prototype for the object type to say, Hey,
this is where the methods that you can use are stored.
So the proto property for an array object will point to the array prototype.
The proto property for a date object would point to the date prototype, etcetera.
And that way all of these different types of objects know where the methods that they can use are stored.
Then when they need them, they can access them.
Now, the same is true for our own objects like user objects.
The user properties will be stored directly on the user objects when we create them, things like the
username and the email.
But the user object will also have a user prototype and we want to be able to store all of our methods
available to every user on this user prototype so that the proto property of each user that we create
points to this user prototype and has access to all of the methods on there.
So this approach of storing the methods on a prototype instead of on every individual object that we
create, it has two main benefits.
First of all, it's going to be more efficient since we're storing them in one single place once and
not in many different locations on every single instance that we create.
And second, it's going to help us with Prototypal inheritance later on in the chapter.
So now we have this idea of what a prototype is, hopefully.
Let's look at how to attach our user methods to the user prototype.
So before we see how to attach a method to our own user object prototype, let me first of all show
you in the console the array prototype as an example.
So we have this array called Nums right here.
And if we expand that, we can see this proto property at the bottom and we can see that this is pointing
to the array prototype.
And if we expand this, then we're going to see all of these different methods that are stored on the
array prototype that we have access to on this nums array.
So we can actually see the array prototype by typing out array, which is the name of the constructor
for an array, then typing out dot prototype like.
So.
Now if we expand this, then we can see inside here all of the different methods stored on that prototype
and we can do the same kind of thing for any type of object.
We could also say Date, which is a constructor for a new date, then type dot prototype to see the
date prototype.
And if we expand this, then we're going to see all of the different functions or methods available
to dates on this prototype.
Now, I said that our user constructor over here is also going to have a prototype and I can demo that.
If I say user dot prototype, then we can see inside here.
This is the user prototype.
Now at the minute, all we have is the constructor, which is this thing over here, this function.
But we can attach other methods to this user prototype so that the stored here as well.
So what I'm going to do now is attach a couple of different methods to this prototype.
So how do we do that?
Well, the first thing we do is get a hold of what the constructor is called, which is user with a
capital U.
Then we say dot prototype, and then whatever method we want to add, we say dot the method name.
So for example, I want to add a login method.
So I'd say dot login.
Then I set this equal to a function and this function can then do something inside it.
So inside here all I want to do is console dot log, and then I'm going to log out a template string
and I can say in here this to refer to the instance of the object that we're using this login method
on.
So that would refer to either user one if we used it on that or user two if we used it on that.
So this username would get us either Mario or Luigi and then we'll say has logged in.
Now I'm going to delete it from the constructor itself because now we no longer want to store them on
there.
We want to store them on the prototype, which is what we're doing.
So now we have this method called login stored on the user prototype.
And if I go back over here and type out user dot prototype again, then we should see inside this prototype.
Now we have the login right here.
Now if I also expand one of these, which is user one and user two, I could see that this proto now
inside it is a login method.
So now our login method for all users is being stored in one single place on the user prototype.
But we could still use it if we wanted to on any of these users.
If I say user one dot login, save this, we can still see Mario has logged in, so it's still firing
this function.
It's stored in that single one place on the user prototype, but we can still access it from any user
object so we can add more than one method on our prototype.
Let's do another.
I'm going to say user dot prototype again, and then I'm going to add a method this time called log
out.
Set that equal to a function.
And inside this function I want to do the opposite.
I'm going to copy this dude.
And down here say has logged out instead.
And now if I say user one dot log out, this should work as well.
Save it.
And we can see Mario has logged out.
If we open up a user and open up the proto down here, we can see log in and log out.
So that is how we can attach methods to our user prototype.
Now in a previous example, when we used classes, we looked at method chaining, which is where we
could say something like user one dot, log in, dot log out and chain these methods together.
Now currently we couldn't do that here because again, we're not returning anything inside these methods
and we get an error if we try to do that.
So what we need to do is again say return this.
If we want to allow method chaining and I can do the same thing down here, return this and then this
should now work so we can see Mario has logged in, Mario has logged out.
So remember, this is exactly the same thing that's happening under the hood.
When we use class syntax, the class syntax just looks different on the surface and it aimed to make
this kind of thing easier, especially to programmers coming from different languages because they might
be familiar with classes.
But before the class keyword came about in JavaScript, this is how we had to emulate the idea of classes
using constructor functions like this and the prototype model.
So now we know a little bit more about the prototype.
Let's have a look in the next video at Prototypal Inheritance.
