Transcript

          So then we've been using this class keyword right here to create JavaScript classes.

But earlier on in this chapter I did mention that this class syntax was just a bit of syntactic sugar

because JavaScript as a language doesn't actually have classes built into it.

Instead, it uses a prototype model to implement the same kind of behavior.

Now the class keyword was just introduced more recently into the language as a way to emulate the idea

of classes in JavaScript, much like they're used in other programming languages.

But the class syntax right here is just a thin layer of abstraction over the prototype model, which

is being used under the hood to create these objects when we write classes.

So now I want to demist what is going on under the hood when we use these classes?

What is JavaScript actually doing in the background?

Now to start with, we're going to talk about the constructor function because in a class this constructor

is responsible for setting up the object, applying the properties to it, and setting the value of

those properties.

Now, when we don't use the class syntax to create objects, we still need some kind of constructor

to do this, to set up new objects.

So let me now comment out this class like that.

And now I want to actually write the code to do this without using classes.

So this is going to be the code that actually lives underneath the class syntax.

And it's the older way that we created objects using constructor functions before the class syntax came

about.

Now, the way we do this is just by defining a normal function.

So I'm going to say function, and then I'm going to call this function user, much like we call the

class user.

And again, we use a capital letter.

This is convention and it distinguishes this function as a constructor.

Now, inside the function we can take all the same parameters.

For example, the username and the email, so we could copy those and paste those in here.

And then inside this constructor function we could set the username and email.

So now when we say new user, the new keyword is doing exactly the same.

First of all, it's creating a new blank, completely empty object.

Then it binds the value of this to that new empty object inside the constructor that is called, in

this case, the user, and then it actually calls the constructor function.

So in this case, it calls this function to create that object.

So now inside this function, this refers to the new empty object, much like it did inside the constructor

for a class.

So now we can attach properties by saying this dot username is equal to whatever username we take in.

And again, we're just passing that in as a first argument and taking it as a first parameter.

And we can also say this dot email is equal to the email we take in.

So this is very similar.

It's just a regular function which takes in these parameters and we call that function right here.

We put a new keyword before it to create that object, pass it into the constructor and pass in these

values.

So now we're setting these values on that new object and this is doing all the same thing.

So now what I could do is I could come down here and console dot log user one and user two and let's

have a look at these.

So save that and preview and we can see we have these two objects both with the username and both with

an email, Mario and Luigi.

So then that's how we create a constructor function to create new objects without using a class.

And this is the kind of code that lives underneath the abstraction of a class.

And it's the kind of code we use to write to create types of objects before the class keyword came along.

And it's pretty much doing exactly the same thing.

It's just creating new user objects and applying the properties to those objects.

Now we have the properties, but what if we want to add methods?

We could again define them, this time inside the constructor again if we wanted to.

So I could say something like this.

I could say this dot login, which is the name of the method, is equal to a function and this function

inside is just going to say something like console, dot log, and then we'll use a template string

so we can grab this dot username.

And remember we can do this because this refers to the object instance inside this constructor.

So we're going to say this dot username has logged in.

So now we have that function or that method defined on the user.

And now we could say user one or user two dot login, save this and test.

And now we can see Mario has logged in.

So this works as well.

So we can add functions or methods this way inside the constructor.

But there is a better way to add methods to our objects, not inside the constructor.

And that is via the prototype.

So I want to talk about the prototype model in the next lecture.