22: How to Create Object Constructors | Object Constructors in JavaScript | JavaScript Tutorial

in the last episode we learn how to create objects inside JavaScript and in this episode we're gonna learn how to create object constructors so this is the example we had from the previous episode were created an object called person and inside the object we have the name that I call it the age and then a method that simply updates the age once I call on it so one issue we have here is the fact that if I want to create more than one person then I will need to go ahead and copy the object and paste it below here then simply change the name from person 1 and then the second one is going to be person 2 when them just need to change the information inside the second object so this is not really a good way to do it because it creates a lot of code inside of JavaScript so to fix this issue we have something called optic constructors which is a way for us to create a Arctic blueprint and then we can create constructors which are basically instances of that specific object now that might all sound confusing so I'm just gonna go ahead and actually create it for you so you can see what I mean so instead of having an object that has the information filled into it like here you can see that the name is equal to Daniel I call is equal to blue we're going to create an object blueprint what that means is that we're going to have an object that does not have information inside of it instead we're going to have placeholders that we can then fill in later on using constructors so I'm going to delete what we have here and instead I'm going to create a object that is going to be a blueprint so in order to create an object blueprint we're just gonna create something looks very similar to a name function which we talked about plenty of times before so I'm going to create a function and then the name is going to be person just so it's the same as the previous example and do notice that I use a capitalized P because objects always start with a caps last letter when we name them so it has to be a capsulized P parentheses curly brackets and then inside this specific object here like I said we're not gonna fill in information into it instead we're gonna go and create placeholders now when I refer to a property inside a Optik blueprint like they want to have here we use the keyword this because when I want to refer to the object that I'm inside of when I want to point to it we use this as a keyword so what I'm going to do is I want to say we have this object punctuation and then I want to give it the name of the property I want to create inside the objects I want to say for example we have name as a profit inside this object then I'm gonna set it equal to a variable called name which is going to be the place hold that we then later on use know to pass in information into this object here so what we need to do is we need to do the exact same way as with a function because in functions when we want to pass in outside data we do that using the parentheses up here so we put in parameters that then get referred to inside the function the exact same thing we're going to do here so I'm going to say we have a name inside the parentheses that is going to be the property of this object here then what we can do is we can create the next property so we can say we have this eye color if I spell that correctly there we go and I'm going to set it equal to I color which is again is going to be a placeholder so we need to fill it in to the parentheses up here in a lot of cases I think it's easier just to sort of fill in everything inside the parentheses first and then create all the properties afterwards but you can do whatever where you might think it's easier then we're going to go and create the next one which is going to be this age there's going to be equal to a variable called age and again the same thing we pass it into the parentheses up here like so and of course we can also create methods inside this object so I'm going to say we have a this update age is going to be equal to an anonymous function fantasy's curly brackets and we do need to put a semicolon at the end here because we want to close off all the statements in here with a semicolon and inside the method I'm just going to go and return the same thing as we did with the previous example so I'm going to say return plus plus then we're going to refer to this age so we add 1 to the age and return it inside the method here so now we have a blueprint we can actually use and now we can just go ahead and create a constructor that's going to take this blueprint and create an object based on the blueprint and the way we do that is very simple to do so next line I'm gonna go and say we have a variable or a litt type variable just couldn't go didn't call them verbose from now on because this does not make sense what could say we have a less I'm not sure how you do that so we have a let and I'm going to call it person one I'm going to set it equal to a new type of object remember when we create a new object we have to set it equal to new and then the name of the object because we created our own object up here that's going to be a blueprint we need to refer to our own object that we call person with a capitalized P if that makes sense parentheses and semicolon so this might look very similar to the previous episode where showed you that in order to create a new regular object that we create it just set equal to new object whether capsulized o so this is very similar to the previous episode the only difference here is that we created this object that we're now referring to so inside this constructor here I want to pass in all the information we had inside the parentheses inside the object because now need to fill in all the gaps they've included inside this object here so the first one is going to be the name so I'm going to say we have Daniel the second information is going to be the eye color so in my case it's blue and the third one is going to be the age which is going to be 27 so now we have this object here that we can simply refer to what we have a constructor that is a instance of the object that we can simply refer to in order to get the information inside this copy of the object we just created so if I want to console log anything I can say console dot log fantasy's and then I can just refer to the object we created here or the instance of it called person or one and then I say punctuation and then access to properties and methods inside the objects so we can say I want to access the name and then we simply spit out the name inside the console and the same thing if I want to access the method I can seem to say we have update aged parentheses and then we access the method inside this object here so it's a very simple process to create a object blueprint that we can create optic constructors based off to create a bunch of instances of this specific object here so when would you use this sort of thing inside a project because this might not be the best way to do it if you just need to have one object but because in this case here we want to create a blueprint for people and we might have up to like a hundred people it might be a good idea to make it in this way so we can just simply make a copy of the objects and if we want to create a second copy and just go and paste it underneath here and then say we have a person number two and then create other information inside their constructor here so we save brown eyes and the H might be forty-three and this is a much faster way to do it instead of creating many copies of a huge object over and over again so this is the way I want to do it if you want to create many copies of a specific object like we just did in this example here so this is how we create object constructors inside JavaScript then the next step so we're going to create another project because I want you guys to understand how exactly we used constructors and just in general objects inside projects in JavaScript so in the next step so we're going to try and create a video game inside the browser using JavaScript so I'm thinking something like an RPG where you can choose a character and then you can you know fight a monster or something and you know we have attacks and that sort of thing so we're going to try and build something using Java seven and again I'm trying to create something a little bit more complicated than what we did previously with the navigation because I do think that I also need to show you some more complicated examples even though the next party is not going to be that complicated I still think it's a really good exercise to try and build something like a video game so you can sort of get the understanding of how we use JavaScript and how you know the logic works when we try to build something using javascript so a video game is sort of a good exercise to do I think I hope it's not going to be too complicated I hope you guys can follow it once we do actually get to the episode in the next one we're gonna try and make a video game for it so I hope you enjoyed and I'll see you next time [Music] [Music]

Channel: Dani Krossing

Views: 75,183

Keywords: create objects in javascript, what are objects in javascript, javascript, javascript tutorial, js, js tutorial, learn javascript, javascript object, javascript objects, javascript object oriented programming, mmtuts, javascript object oriented tutorial, object, objects, how to create object constructors in javascript, how to create object constructors, how to create an object constructor, object constructor, constructor, javascript constructor, Object Constructors in JavaScript

Id: e1yBONtbTuA

Length: 9min 6sec (546 seconds)

Published: Tue Jun 19 2018