Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)

or rather than ganks so we've looked at classes so far to create these different objects but earlier in the course I mentioned that es6 classes were actually just a bit of syntactic sugar built on top of the JavaScript prototype model so JavaScript as a language doesn't really have classes the stuff we've been right in here as so far basically been pretend classes built into the language as a way to emulate how classes behave but classes are just a thin layer of abstraction built on top of the JavaScript prototype model now the JavaScript prototype model was the original way we tend to create or emulate classes in JavaScript before we had this class keyword and when we now create a class using the new es6 class keyword javascript is still working the same way as it did before to emulate these classes using the prototype model under the hood now you might be scratching your head thinking why am i telling you what this and why do I even need to know now that we just have this class keyword can I not just use that instead of worrying about the prototype model and what's going on under the hood and well yeah if you don't feel and need to understand the inner workings or want to be a more complete JavaScript developer that's fine you don't need to learn it but by learning the prototype model you'll have more flexibility when it comes to working with objects debugging code or even working with all the developers code who may have used the prototype model because you can't be sure that everyone wants to use classes right so that's why I want to teach you to you I do think it's important to learn so there you go now you know the classes are just syntactic sugar and before they were introduced we had to emulate classes a different way which is what I'm going to show you around now so let's just think for a minute when we create a class using this class keyword right here what is it that's actually responsible for making up that object when we want to create one based on that class well it's a combination of things really but mainly it's the constructor function or right here that is the thing that binds all of the properties and values to the object when we create it right here all right so even though we're not going to be using the class keyword now to emulate a class we'll still need some kind of constructor function to construct the objects okay so first of all let's get rid of all of this junk we don't need this anymore because we won't be using classes now I'm going to keep var user 1 and user 2 will still use those later on but the rest of this stuff I will delete ok then so we need to create this constructor function so it's just a normal function and we'll call it user with a capital u like so now before the class that we created was called a user with a capital u now it's the constructor function let's call user with a capital u because we're not using the class keyword anymore so this constructor function rakion now represents our user class it creates user objects now when we want to create a new user object we can still create that in the same way using this new keyword now here we don't need to change that one bit because remember when we use classes the class keyword JavaScript is still doing all of the same stuff behind the scenes so this new keyword right here this is still doing all the same kind of stuff it would be doing for the class under the hood alright so again what that new keyword is doing is creating first of all an empty object for us then it's binding the context of this equal to that object that into object and it's passing it into this constructor function or right here so then we have access to this as the empty object inside this constructor function so again what we could do is take those parameters inside this constructor function email and name and we're passing those in right here yep and then what we can do is we can add those properties to this keyword to the new object that we've passed into this constructor function so we can say this email is going to be equal to email the thing that we receive right here and also this dot name is going to be equal to name I'm also going to give this an online property list online which says whether the user is online or not and I set that equal to false to begin with we don't need to pass in as a parameter because it's always going to be set to false to begin with when we create a new user now remember in the last videos we also added methods to our class so let's just add a method to our constructor function right here we'll say this dot log it is going to be equal to a function like so and inside this function what we'll do is say console dot log and we'll say this dot email has logged it okay all right then so let's just add down here i console log to see if this works well log user 1 first of all to the console and then we'll say also user to login and we'll call that function on user 2 okay so now I'm going to save this and just head over to the browser to see if this works and we can see now that in the console first were logging this user right here which has these properties email name online and then we're saying Yoshi and Mario Kart which is user twos email has logged in so this is our working and I can call those from the console as well we can see user two is Yoshi and Mario Kart comm etc ok so this is all working now so if you think about it we're still kind of emulating a user class this way it's just that now we're no longer using the class keyword this is the kind of stuff we do before the class keyword under the hood right now then this is fine but generally when we want to attach methods to an emulated class like this we don't put those methods inside the constructor function instead we use the prototype property on this constructor function and we'll see exactly what that looks like in the next video