Object Oriented JavaScript Tutorial #5 - Class Constructors

or rather than so we have our class defined right here but nothing in it yet now the first thing we need to do inside a class is to create a constructor function now a constructor function is the function that actually construct our objects or create them so when we say in the future that we want to create a new user the constructor function will be responsible for actually creating that new user object based on this class so let's create that first of all we do that by coming inside in this class and saying constructor and this is a function so this is the function that's gonna fire whenever we want to create a new user object all right so now whenever we want to create a new user object at some point in our code later on we can just say something like var user 1 is equal to new user and user has a capital u that's how it knows to look for this class right here okay so first of all this new keyword right here what is that doing well I've written it down right here so we can see that and it does three things essentially the first thing it does is create a new empty object because at the end of the day we're just creating a new user object right so it creates that empty object then what it does is take that object and it sets the value of this inside this class to be the new empty object so remember that keyword this right whenever we refer to this inside the class then it's the new object that this just created okay so it refers to that then what it does is it calls this constructor method so then we can go about adding properties on to that object by using this keyword we could say something like this email equals something or this dot name is equal to something right so when we're calling this constructor we're taking this new object that we've just created down here and we're attaching new properties to it now then we don't want to hard-code these properties I don't want to set this equal to say for example Rio at ninjas calm and then down here the same Ryu like that I don't want to do that because then whenever we create a new user no matter what it is if I copy this and paste it underneath and call this user too then both of these instances of the user both of these objects are gonna have the same email property and the same name and we don't really want that the whole idea is to create different instances of this user object with different values for the properties so what we need to do is find out a way to passing information here when we create the user into the constructor method and we can do that really simply just using arguments right here so for example we could say in the constructor we want to receive two arguments we want to receive email and also the name so two variables were expecting when a user creates a new user so let's pass those in I could say right here okay well user one is going to have an email of Ryu at ninjas comp and then the second argument is going to be the name and the name of this user is right okay so then when we call new user and we're calling this constructor we're passing these two values into here and so inside this constructor we have access to them and instead of hard-coding something I could just say well this email is now equal to email that we passed in so this thing right here and this dot name is now equal to name okay so that makes much more sense because every time we're creating a new user now we're creating it with different values so for the second user we could say Yoshi at Mario Corp calm and the name is gonna be Yoshi okay so then we have two different user objects now and they're both gonna have different values for these email and name properties so that's cool so really quickly again from the beginning when we say we want a new user the new keyword is doing three things creating an empty object then it sets the value of the keyword this inside the class to be equal to that new empty object so we have access to that empty object via this keyword then it's calling the constructor function inside the user class because we specified that right here or passing in these values into the constructor then we're attaching the email property and the name property to that new object the empty object it just created and we're setting the equal to the values we passed in as arguments right here okay so now we have two objects let's try it login those to the console I'll say consult lock first of all use a 1 and then underneath console dot log and it will be user - all right then let's spell this correctly like so let's save this now and check it out in a browser over here and we can see user 1 first of all why you at ninja's calm and the name is Rio we can see those two properties right there and user - when we log it to the console Yoshi and Mario Kart comm and Yoshi for the name so you can see already how much easier this way of doing things is much less code to create two separate versions of the same kind of object

Channel: Net Ninja

Views: 188,530

Keywords: object oriented javascript, javascript, object, objects, oop, tutorial, object oriented js, object oriented javascript tutorial, oop tutorial, javascript classes, oop javascript, object oriented js tutorial, js tutorial, javascript objects, class constructors, class constructor, constructor, constructor function, constructors, constructor tutorial, javascript constructor, function

Id: HboT8g_QSGc

Length: 5min 38sec (338 seconds)

Published: Mon May 14 2018