Object Oriented JavaScript

well hello internet and welcome to my object oriented toward in this one tutorial I combined all the questions I received on my website as well on YouTube and I'm going to answer pretty much everything you'd ever want to know about object oriented JavaScript we're going to cover objects properties constructors prototypes private properties numerous different ways to create getters and setters how to use defined property inheritance how to call parent methods I'm going to cover some design patterns and even oo P in ECMAScript 6 or what would be commonly known as the future of how to do object-oriented programming in JavaScript in the description underneath the video I have timestamps to all the different things that I cover so if you want to just click on those and jump around in the video and learn only what you want to learn feel free to do that and of course all the code is also available in the description and I have a lot to do so let's get into it okay so on the left side of the screen I just have sublime text here basic text editor and you can see all of the code that's right there and this is where I'm going to be typing everything over here I have Google Chrome and I just went over here and went file and open file and then I opened it up and that's it later on whenever I cover ECMAScript 6 I'm going to come inside of here and I'm going to come down inside of here where we have more tools and I'm going to click on developer tools and a whole bunch of things popped up inside here errors and such and what I'm going to do is open this up and I'm going to click on scratch j/s and if you type in scratch j/s in google you're going to see it right here and this is going to add this in as a developer tool you can use inside of chrome ok so just install that and then I showed you how to open it and later on we're going to get into exactly how to use that and also just so I'll be able to follow my different errors I may make I'm going to click on View and developer and JavaScript console and that's going to open up a little console here and tell me if I make any errors and if you haven't watched my JavaScript tutorial you should probably check that out but it's not necessarily needed because I'm going to cover some things here that I covered there along with a whole bunch of other things well first thing I'm going to do is I'm going to create a basic object inside of here and I'll show you a couple different ways to do this but you'll be able to come in here and define some different properties like the customers name being Tom Smith we can also come in here and find a function for our customer and in this situation we're just going to return a string and it's going to be my name is and then on to this we're going to tack on this which is a reference to a specific objects value that value being named and we'll close that off and then down here we're going to put another comma everything separated by commas as you can see right there and also you can see right here that we'll actually be able to put objects inside of objects so let's say I wanted to put another object inside here for address and then I wanted to go and put some additional properties inside here like 1 2 3 main street again we're going to separate all these with commas and you can see I can go and put double quotes or single quotes or whatever I want to put inside of here and state and PA and then the final one you don't do anything with and then you close this off with a semicolon now that is a basic object inside of JavaScript now inside of a write statement I can output this to the browser just by going and referring to the objects name with customer and then follow that up with speak and since it's a function put it on like that and reload it you can see my name is Tom Smith pops up now we can also come in here and get ahold of the information that's inside of address so let's say that I wanted to say something like customer name and follow that up with lives at and then customer I would refer to the inside of that object is just to refer to it like this address save that reload and you can see Tom Smith lives at 1 2 3 Main Street so that's how we'd be able to refer to objects inside of objects we're also going to be able to come in here and add properties so we'll just say customer let's say that I wanted to add to the address object country also I could do it this way and I could just go US and there it is inside of there and of course I'd be able to come in here and out that information again just by referring to it in exactly the same way country and you can see us pops up there now if you wanted to be able to come in here and create multiple different objects of the same type you're going to use something called a constructor function and basically a constructor is going to provide the functions that classes provide in other object-oriented programming languages and you start it off by just going function and then you're going to define exactly what you want your object to be called and if you want it to receive certain properties sent into it and set you do it this way and you would set those values just by going this name is equal to name you don't have to define the data type or anything like that and we could do the same thing with street of course and then if we wanted to define a function this way we're going to do it in a different way than what you see up here say previously we define speak and function like that whenever you're defining them inside of a constructor function instead you're going to list the name of the function followed by function like this and then you can have it return some sort of information and there you can see it's just going to list out the name and it's going to say what street they live on now of course I'm going to be able to refer to this person object by first coming in and calling our constructor function so let's say I want to create a person named Bob Smith equal to new person like this I just pass in the name like we have to find that it's going to do and then I would also pass in some type of street address so Main Street like that works fine and there we go I just created a new person object named Bob Smith and I'm going to be able to call this with document.write and I can go Bob Smith like this and then to call the specific function I want to call I just do it like that with a dot operator and reload you can see my name is Bob Smith and I live at two three four Main Street now we can come in here and check if a specific object is an instance of a specific object type so we could say something like Bob is a person meaning the object type there and then we would be able to come in and check if he was by going Bob Smith like this and then instance of just asking if it is a person object and you can see Bob Smith is a person that comes back as true all these things are very useful to know because you're going to use them a lot another thing we'll be able to do is pass an object to a function and change its values and to do that we'll just create another function and let's call this function change name it's going to receive a person we can then just go person name is equal to and Sue Smith and I'll show you later on how to make these private so it's not so easy to come in there and mess them up we will then call the change name function and pass Bob Smith inside of it and we're going to then be able to come in and output this change so we'll say Bob became make sure you put quotes around this and now we'll come in and we'll say something like Bob Smith and name and you can say that Bob Smith became Sue Smith it's also important to know that objects are only going to be equal if they reference the exact same object it doesn't mean that they'll be equal if they contain the same data and we can see that that is true let's just come in and go person 1 is equal to new person and I will pass in Paul and then we'll also pass in 1 2 3 main and there you can see they are precisely the same object however if we would come in here and see if they are actually equal we'll say are they equal and we can check for that equality by just going in here and going person 1 and checking and we can do double equals or triple equals it doesn't matter which person too and the difference between double equals is it checks the value and triple equals it checks the type also it's not going to matter in this situation though and you can see are they equal it's false and if we change this to double equals like that you're going to see that you get this same exact answer that's just different ways to check equality now let's take a closer look at prototypes now every function is going to have a prototype property that's going to contain an object and you're going to be able to add properties and methods to the prototype object and then whenever you call for them to execute they are used just as if they belong to your object which so let's just come in here and create a generic function because like I said every function contains a prototype object and this guy is just going to return the number one plus the number two addition right here now what we're going to be able to do we're going to be able to do a lot of different things but we could come in here and find out the number of arguments that this function receives will do something like num of arguments and then we can come in and get some and follow that with length and you'll see a number of arguments except it is two and the number of arguments that it receives is two we're also going to be able to add properties and methods to an object using prototype so let's go and let's create another one here this is going to be an object in this situation so we'll go function and then we'll create a mammal function and or a mammal object and we'll just come in here once again Ango this name is equal to the name that they passed in this and then we'll create a function for it equal to function like this and it's just going to return mammals name is and then pass back the name and now we'll use prototype to come in here and add an additional variable to it by just referencing the functions name followed by prototype and let's say that I want to add a sound for this guy and I don't want this to be a function in this situation I just want this to be a string for Gurr so that's going to be the default for our mammals I'll then be able to come in here and add in another reference to prototype and here I'll add a function so I'll call this make sound equal to function and this guy's just going to return whatever the name of it is plus and then it'll say says and then after that it's going to pass back the sound now what I'm able to do is create a specific mammal called grover and he is a mammal and his name of course is grover and then i'll be able to call document.write on this just to prove that added in properly the make sound and sound and all that stuff I'll just call make sound like this and you can see Grover says goer so that's how we can create another object and then add in different variables and other different functions quite easily using prototype we're going to be doing a lot of things with prototype could also be able to come in here and list all the properties of an object and for this I'm going to use the for in looping structure so we're going to variable prop which is going to be the temporary holding cell for each property that we find inside of Grover in this situation as we cycle through all of its properties we'll just go document right and let's say that we want to just print out the property that we have for it and then specific type here's Grover how we'll reference those properties is right like this and you can see right here we have a name property and the value associated with it is Grover get info it's actually going to print out the entire function right there sound you can see that right there and make sound it's also going to print out that entire function which is very useful for going in and doctoring and messing around with different objects so there's all kinds of really cool things you can do with JavaScript and I'm just scratching the surface of it or at this point in time it could also come in and verify if a property belongs to the prototype part of an object or the object Grover itself so let's just come in here document right and we can see if name is a part of prototype or Grover so I will say property of Grover and to be able to find that out we're just going to say Grover and then we'll say has own property and use cheat sheets don't try to memorize all this stuff that's the reason why I made you cheat sheets so we're going to check if name is part of the Grover or not and then likewise we can do the same exact thing let's come in and check if sounds is a property of Grover and then to verify that again we're just saying say Grover dot has own property and then we'll pass in sound this time instead you can see name property Grover that comes back is true and the reason why is name is indeed in here however sound comes back as false and that's the reason why is we have that in the prototype so that's how we can check those different things another thing it's really cool is we were able to add methods to our objects that we created what's also cool is we'd actually be able to add methods to build in JSX so let's say we wanted to do something at in an additional function or method or whatever you want to call it to the array built-in object we just go array prototype and one function that is missing from the array object is an array which is going to allow us to search through an array and find out if an item is inside of it so let's go and create it since it isn't already built-in so we can pass in a value to this array and then what it's going to do is we'll create a for loop inside of this is equal to zero start off with the first index and it will cycle through this is a reference to the array and length like this will cycle through all of the different items in the array until we reach the end and then if we hit a situation in which the array item is equal to the value that we are looking for we are then going to return true meaning that we were able to find the item we were searching for inside of our array and then otherwise if we go through the entire loop and we don't find anything we'll return false and that's how easy it is to add an additional function to a building object inside of JavaScript so let's come in here and verify that this actually is going to work let's create a new array throw in some sample values here and then we'll be able to come in here and search it to see if it's true so we could say something like three in array and find out if that actually comes out and to do that we'll just go sample array like this in array our new function we created and throw three inside of there and reload it and you can see that it comes back it's true because three indeed is inside of the array that we checked so really cool stuff now let's take a look at private properties now all properties in an object are public in that any function can modify or delete these properties however you can make properties private by declaring them as variables inside of a constructor I'm going to do that right here so let's say we have something called secret code and we want to protect our secret codes so nobody come in there and alter it or get it or do anything no problem we're just going to come in here and actually declare it so we'll go secret number is equal to 78 and I'll show you that it is indeed private and protected I'm going to create a function however that is going to be able to interact with it however it is not going to be able to be manipulated to get the number so it's going to receive a number guess and then what it's going to do is it's going to search inside here and find out if the number they passed in is greater than 78 or we could refer to a secret number if we wanted to let's just keep it simple just go 78 otherwise return and we're going to say that they need to guess something that's lower else if the number that they are searching for is less than 78 well then we're going to return that they need to guess something that is higher and then else in that situation that means they actually guessed it so we're going to say return you guessed it now let's go in here and actually verify that all this stuff actually is private so go outside of your function and I'm going to create something called secret which is a new secret code function or object let's go in here and get a document right and we'll say something like value of secret number and let's go in and try to get it and we're going to say secret and go secret number which is the guy that we have right here you would think that would work let's go and see if it did value a secret number and comes back as undefined okay so we weren't able to get the secret number that way let's try and see exactly what else we can do with it well we could just plain ice and just call the function we created so let's just go is 70 the number and we'll say secret and we'll say guess number and the first number we're going to guess is 70 and you're going to see that comes back with higher that we need to guess a different number and indeed if we come in and guess 78 that gives us the option to know that it's true and you can see that you guessed it pops back another thing that's interesting is even if you go and add and know function it even the function that you add isn't can be able to get a hold of secret number so we can go inside here and we can go secret code and go prototype and get secret because you're thinking a trick G I'll be able to come in here and get a hold of this and we'll create a function and the whole purpose of this is to return the secret so we'll go this and secret number like that Oh ever whenever you call it you're gonna find out that you still can't get it it is protected secret number is and this is the point which we are foiled we'll say secret get secret and whenever we reload that you're going to see the secret number is undefined so there you can see that it is indeed possible to make private variables inside of objects in JavaScript and protect them and yet in the same way we'll be able to come in here and work with them and you can also say that inside of this function if I just go and throw a secret number inside of there instead of 78 you're also going to see that both those also work so pretty cool stuff now let's take a look at a bunch of different ways to create getters and setters and while doing so I'm going to teach you a whole bunch of other things about object-oriented JavaScript now getters and setters are going to both protect your data so for example they couldn't enter a number in for a name or something like that but they're also going to provide useful ways for you to be able to set values and like I said I'm going to show you a bunch of different getters and setters because as you look at other people's JavaScript you're going to see these implemented in numerous different ways and also it gives me an excuse to show you other things about object-oriented JavaScript so what I created here is just a basic old address object and I'm going to create a getter for it so let's say get address and what it's going to do is it's going to combine all of the data that I have there into one line so it's going to come in and say return and just put in the streets and it's also going to go and divide all this stuff up with commas and there you can say it's going to get this street the city and the state and return that and it was implemented just by throwing get in the front and you're going to see how these are going to be able to be worked with and of course separate these with commas once again and now what I'm going to do is I'm going to allow the user to send in three values that I'm then going to split up and stick them into their separate pieces and then of course they'll still be able to be accessed using get address so this is how you create a setter so we'll go set address and they'll pass in an entire address and of course I can't always guarantee they're going to pass in the data right and I should check it but I'm just trying to keep this simple here so we can focus in on what's important and I'm going to convert this into a string and then I'm going to split it and how I'm going to split it is with the comma and the space in between all the different parts and now what I'll be able to do is go and assign those different parts so we'll go the street is going to be in the parts array index 0 and if they didn't enter anything just to protect myself I can just throw in some quotes there that will be used as a default and I can also come in for the city and get the parts as well the second index should contain that or we're just going to throw nothing inside of there and then finally the state is going to be equal to the last index that we have inside of there or we will throw just an empty thing inside of it ok so that's how our setter is going to work so now let's come down here and actually do some cool stuff so we'll do and call address and we will call set address for this guy and we'll pass everything in here real nice and neat the way that we want now we're going to be able to call the setter just by putting an equal sign we don't have to use it as a function and then we're just going to come in and we'll say 1 2 3 and Main Street and divide everything up with commas and there we go and now what we'll be able to do is come in and output the address and I'll show you how to use the getter here we're just going to go address and get address and again we don't have to use the parentheses there for the normal type of function and if we reload it you can see it prints out exactly what we would want and of course we would also be able to come in here and print out just one of those items because we divided everything up so we could come in and do something like city and then we could just call the specific variable inside of it and it's also going to print out the city so there's one demonstration on how to use getters and setters now I'm going to show you a deprecated way of creators and getters and setters it still works in all the different browsers however and it is very likely that you're going to see it eventually so now we're going to create a constructor function and I'm going to call this coordinates and I'm going to create a couple more getters and setters here I'm going to show you some things that are still used a lot and you should know about but I'm also at the same time going to show you the up-to-date way of using getters and setters actually I'm going to show you how to go and use getters and setters in JavaScript in a way that's not even implemented yet on all browsers but soon will be and now what we're going to do is we're going to define the getter and setter for this now that we have latitude and longitude inside of there and how we would do that is go object dot to underscores and define get her two underscores and then we're going to call call what we're going to pass inside of here is the prototype that we want to assign to it and that's going to be coordinates like this prototype then we're going to pass in the actual property name so let's just call this get chords and then we're going to create the function and come down here and close this off with a semicolon just so you don't get confused and then what this guy is going to do is return the latitude and longitude quite simply plus and then we'll go this and we'll go a latitude and it will also come in and output the longitude data this longitude and there we go we just created a getter and I promise you if you get in contact with enough people's code you will see this being used now I'm going to show you how to use or define a setter call and once again we're going to pass in the prototype to assign this setter function to so it's going to be coordinates again and prototype and then we're going to define the name I'm going to call this set chords and then once again we're going to define the function itself for our setter so function and it's to get coordinates passed inside of it put the semicolon there so you don't forget and now we'll divide everything up like we did with the address before so I'm going to go parts is equal to chords like this I'm going to convert it to a string once again I'm then going to split that string based off of commas and spaces and then I'm going to assign the latitude for this guy equal to the parts array index 0 or let's just throw nothing inside of there and then I'll do exactly the same thing for the longitude parts of it parts and that's going to be one or nothing and there you go you just define getters and setters for an object constructor and we can come in here and test it is equal to create a new coordinates object and we'll be able to call the setter by going to US coordinates and set chords like this again we're not going to use the parentheses and then we can come in and just throw in a latitude and a longitude into this and then of course we'll be able to come in and output some information so we'll say something like coordinates and then we'll be able to come in and just call test coordinates and call the getter and reload and you can see it works except I have too many O's and coordinates but that's not a big deal so there you go that's another way of creating getters and setters now I'm going to show you how to create getters and setters using something called define property now I went ahead and created a point constructor function and I'm going to show you a bunch of always work with this let's say we want to come in and add a getter and a setter using something called defined property how you would do that is reference object which by the way is the object that every single object inside of JavaScript is inherited from so every single function inside of object is available to everything else so let's come in here and go define property now what we're going to do here is we're going to pass in the prototype to attach our new function to so that's going to be point and take guess what this is going to be prototype once again then we're going to define a name for it so I'm going to call this point position then we'll put it in our curly brackets and then I'm going to say get and then I'll define the function for our getters and setters and what this is simply going to do is just return a string of course so it's going to have X and then it's going to return the x position for this guy and then it's also going to get the Y point position and output that as well so Y position like that and that is how we would come in and define a getter using defined property now let's go and create a setter once again so just to find the function it's going to be passed in a string called the point and you've seen this a bunch of times here is the array we're going to cycle through it get rid of the commas in the spaces and stick them into the individual parts of our point object then after you do that make sure you put your semicolon here to close this off and that's all you need to do with define property you can define the getters and setters at the same time now we'll go in and create a points which is going to be a point object will then be able to come in here and call the setters by going a point and calling point position and then we'll pass in 100 for the X and 200 for the Y and then we'll be able to output this information on our screen so we could say something like point position and then we'll just go a point like that and then how we will get a hold of the getters is to just go point position once again same exact thing and close that off and there you can see exactly how that works okay so I showed you a bunch of different ways to use getters and setters and I'll show you the pretty much most up-to-date way of creating getters and setters now this way of creating getters and setters is based off of the ECMAScript 5.1 version and let's just come in here and let's say we want to create a circle and it's going to receive a radius and real simple let's put an underscore here to separate this from all the other radius references that we're going to be making not what we're going to be able to do is reference the prototype again and create the Sutter and to do that we just type in set and radius followed by radius right there what it's going to be receiving then what we'll do is we'll just go this radius which we have stored inside of our object is equal to the radius that was passed in and the getter part of it is going to be radius and it's not going to receive anything and it is just going to return the value of radius and then make sure you put commas between all these guys so comma and comma and it will create another one that's going to get an area which is another function we'll have here and we can just say return we can call the value of pi because that's stored inside of JavaScript in our math library and multiply that times this underscore radius times this underscore radius and then close that off we don't need any more commas and then put another semicolon here to close off that definition right there now we'll be able to come in and create a circle object and we can pass in a radius for it and then we'll be able to actually set or change the radius calling the setter just like that so you can change it to 15 and now we'll be able to come in here and output this information on the screen so we'll say something like a circle with radius and how we'll be able to get ahold of that radius again we'll be using the getter here in this situation circle radius and then we'll also be able to come in and get the area of it as an area oh and how we'll be able to call that area function is just go to circ area and then let's say that we want this only to be two decimal places we'll use to fix again I covered this all in my JavaScript tutorial up had a little bug here on line 18 and you can see exactly where that occurs put that dot in there you can see right here says this radius is not defined say and now you can see a circle with radius 15 has an area of 700 6.86 so that is the final way that I'm going to cover on how to create getters and setters inside of JavaScript now let's take a look at inherit now to understand how inheritance works inside a JavaScript you have to understand exactly how prototype works inside a JavaScript now whenever you call for a function let's say it's bark inside of dog it's going to first check the dog object and find bark and it's going to execute it let's say however you have a variable name that is stored in the prototype object which is also inside a dog if you would say that you wanted to use a dog object and find name it would first check the dog object say I can't find name here then it would check the prototype and say ah here's where name is and use it okay so it's an object inside of an object just like we created objects inside of objects now if we wanted to inherit name inside of another object let's say it's animal and name is actually stored inside of animal how are we going to get ahold of this because dog is a separate object from animal quite simply all we would do is come in and make prototype actually equal to the animal object then it's going to be able to come in here and say I want name for the dog and it's going to go into the prototype and say huh I don't know where it is oh that's right prototype is actually an animal object and then it's going to be able to get the name so what I'm going to do is demonstrate exactly how that works so we're going to start off by creating an animal object and it's not going to get anything and we'll say that it does have a name and let's just have it be called animal by default just to keep this simple we're then also going to define two string and it's a function that's in the main object object that every object inherits from but we're going to overwrite it here so this is how easy it is to overwrite functions you just overwrite them and this guy is going to return my name is and then pass back the name okay so that is going to be store and make sure you close that off with a semicolon like this now what I'm going to do is I'm going to create another object and it is going to be called canine and in this situation I'm going to create a name inside it as well and this is all for tracking purposes so we'll be able to see different things and then I'm going to create another one which is called wolf which is in the canine species and it is going to have a name of wolf now if I want to overwrite the prototype for canine and wolf what I'm going to do is just go canine is and then go prototype and assign it to the animal object okay so now the prototype is actually an animal object going to also do the same thing for wolf and this is going to give us the ability to come in here and create multiple well it's not multiple inheritance but it's different levels of inheritance and in this situation it's going to get the canine object assigned to that prototype one thing to remember however is after you overwrite a prototype its constructor is actually going to point to the main object object so you're going to have to reset the constructor for it don't really need to worry about it much more than just to know to do this canine prototype and then follow that up with constructor is equal to canine okay so make sure that you do that and then you're going to do exactly the same thing with wolf prototype and then go constructor this is equal to wolf so there you go we just assigned the animal objects and all the methods and variables inside of it to the canine prototype so it will be able to access them that way now we'll be able to come in and say something like arctic wolf is equal to new wolf and I'll show you how to get ahold of those parents or animal methods and fire those instead even if you have the same name inside of them and now we'll be able to come in here and access the two string even though two string is only in the animal object and I'll show you how to do that it's how we're going to do it is document right of course and we'll say arctic wolf like this and we can go to string and it's going to jump up multiple levels because see canine a wolf are all separated from the animal object we have up here we're still going to be able to call it though and you're also going to see that it's going to output the proper information and you can say my name is wolf so it's going to use the name part right here and it's going to use the two string which is located inside of the annum project and work perfectly so even though the function is only an animal it's still going to access it it's going to jump from the wolf to the canine the whole way up to the animal object and use to string however since name is inside of wolf it's going to use the proper name right here so pretty cool and also sort of a demonstration of polymorphism we're also however going to be able to check if wolf is an instance of animal and of course how we're going to do that is go arctic wolf instance of animal and you can see that that comes back is true say so the wolf is actually an animal even though it is also still a wolf so pretty cool stuff another thing that's interesting is we'll still be able to add in different variables and functions into this even though we changed our prototypes so let's say that we want the canine the wolf and all animal objects to have a sound property well we can do that just like this we're not giving up anything by assigning the prototype to another object we're just changing the way we are referencing it come in here and also go and create gifts sound in the same way that we did before and return and say this name says and then reference sound which is only inside of the animal object and then we could also come in and define sound differently using prototype it's not going to mess up anything so we can't assign a different sound for our canine and also come in and define a different sound for our wolf just like that so we're not being hampered in any way by assigning those objects to the prototype and we could say we want to verify arctic wolf and get sound and you can say wolf says girl wolf so it's able to use the sound that's been attached to the animal object but it also is able to also use the new sound that we attached specifically to the prototype for the wolf so really cool stuff however it is very important to also know that more often than not it makes more sense to just inherit the prototype to speed up the lookup process so let's go and create another function here and we'll call this rodent and it's not going to get assigned anything and it's going to have a name equal to rodent and then will also create another one called rat and give it a name also now we'll be able to come in and go rodent prototype is equal to new animal say we went and tricked you there and through an animal and go rat prototype again equal to rodent prototype and remember we have to reset the constructors will say rodent prototype constructor make sure that is still a rodent and I'm going to show you a trick to get around all this here in a second make this a lot neater so prototype constructor is equal to rat now what we're going to be able to do is come in here and target a specific type of rat new rat and remember we were able to get the animal inside of there so we're going to say to string and I'll put that and if we reload it you're going to see my name is rat pops up so pretty cool and it was very easy to come in here and just add in that animal object to a prototype and speed that along now let's see how to clean up a lot of this mess by using an intermediate function now what I'm going to do is just create a function that's going to handle a lot of the messy work for me and let's call it extend and it's going to be passed in a child as well as a parent object and what I'm going to do here is I'm going to create a temporary and I'm just calling over giving these uppercase letters just to define that they are objects that's the reason why I use that just to differentiate them this is going to be a temporary holding cell so I'm going to go to town and I'm going to say prototype and I'm going to assign the parent prototype to that and now I'm going to go and get the child prototype give it the value of a new or new temp object we have here and then child prototype constructor is going to be equal to child such sort of handles assigning the prototypes as well as assigning the constructor and making sure that everything works well over there and the reason why this is important is let's say we created other function called deer and we can say this name is equal to deer and this sound is equal to snort will then be able to very quickly assign deer to animal by just going extend passing in or new deer object and then also passing in an animal object see that's a lot easier than what we were doing before and now we can go and actually get this to work so let's go up first off let's go and create a different specific type of deer so we'll create an elk equal to new deer and now we can output that information so we'll say we'll say elk get sound which is inherited from the animal object and I accidentally went and deleted the animal object before I was done with it so let's throw this in there paste in everything that we just did see there's exactly the same thing save that reload it and now you can see deer so snort so there's a bunch of different ways to streamline the process of inheritance inside of JavaScript now I'm going to show you how to call parent methods or super classes or whatever you want to refer to the mass okay so I created a vehicle object here and now I'm going to assign some functions to this parent object that we're going to be calling here in a second so just go prototype again is equal to and then we can define a whole bunch of different functions here so it's function and this guy's just going to return this name and just keep it very simple drives forward and then we'll separate this and then we'll also throw in a stop function and then this one's just going to return this name stops now I'm going to create another object except this guy is going to be called truck and it's going to get passed in a name this name is equal to whatever the name is it's passed in and now we want to inherit all of the different functions that are inside a vehicle for truck so we'll just go truck prototype equal to new vehicle then come in here and also assign the constructor equal to truck and now we'll overwrite the drive parent method so we'll go try dot prototype this is how we would overwrite a method inside of it if we would like to we just go function and then the different thing we want to have it do I'm going to go here is a create a drive message which is going to be equal to and now if I want to call the parent method which is inside of prototype I can do that vehicle prototype drive and I'm going to follow that with apply and then I'm going to pass this inside of it and that's going to allow me to call the vehicle version of drive even though I am overwriting the drive version for vehicle inside of my truck object and now what I can do is I can say return and I could throw in the drive message just to prove that it actually still works plus equal to and since this is a truck it's going to be able to drive through a field cause it's a big tough truck now I come down here and verify that let's go and create a jeep which is going to be a truck object and we'll just pass in jeep as the name for it and then we can just call Jeep drive and then Jeep stop and you can see right here it automatically went and grabbed the drives forward from the main vehicle guy up here say vehicle drives forward like that and also use the name which was assigned for jeep and then it also tacked on the through a field which is added into the truck so that is how we call parent methods now let's go and take a look at how Java Script is going to be changing by taking a look at ECMAScript version 6 ok so I'm going to have to do a couple little crazy things here I got scratched Jas over here opened inside of my browser like I showed you in beginning of the tutorial and now I'm going to walk you through some of the changes and I'm going to execute them over here because they currently do not execute in all browsers but it's something that is definitely coming very soon now the very first thing I want to talk about is how method notation in object property definitions is going to be changing this is the way that we currently do it inside a JavaScript and what I'm going to show you is the ec6 way of doing things and how that is going to help so I'm going to define everything exactly the same way ad stuff is equal to and this is the part that's going to change we're now going to be able to come in here and define methods with some num1 and num2 in a way that is more common in other different languages so we'll say num 1 plus num2 and then the document.write stuff is going to be done in exactly the same way and if we go and we copy that and paste that down here and we copy this scratch j/s is going to allow us to see what the future is your JavaScript is going to look like and I just copied and pasted that inside of there if I click on run you can see that one plus two is equal to three works just like that so you can see there we don't need to put the functions in or the colons or anything we can write in a style that is more common in other programming languages now let's take a look at how classes are going to change now previously or currently classes don't exist inside a Java Script but they soon will so for example in today's Java Script if we wanted to come in here and define a point this is exactly how we would do it this is the way that we're going to be defining classes inside of ec6 we will instead be saying class and point and then creating a constructor separately passing in the x position and the Y position we'll be using this once again to set these different values so now that's going to change we're just actually going to have classes and then inside of that instead of putting commas between everything we won't need to do that anymore for our different functions that we create inside of here we'll just be able to go get position and then we'll return everything exactly the same as we did previously up here okay so it's a little bit neater and easier to see then we'll be able to come down inside of here and create a point let's just call it point just to keep everything simple new point pass in 100 and 200 and then the document.write part of course is going to be exactly the same we can paste that inside so now let's go and copy this and see that this works over inside of here paste that in there there it is as before and run and you can see indeed that that does work so classes are coming to JavaScript and they will be coming very soon now let's take a couple other looks at other specific object-oriented stuff with ec6 we're going to come in here and create an animal object using a class go and create a constructor course we're going to assign the value to that we can then come in and go to string and return animal is named this name and we're going to be able to create static functions as well and we'll be able to just come in and type static get animals and return new animal let's go and create an one side of this with no name so this is going to allow us to generate new animal objects just by calling the get animal function inside of here which is static we're also going to be able to extend or inherit in different ways with ec6 so we can just inherit everything that animal has inside of it just by putting extends inside of there here we can then change this up so that the animals also get an owner we're also going to be able to call the superclass in an easier way just by using the super reference so this is automatically going to initialize name just by calling the super constructor up here and then because owner doesn't exist inside of the animal object we'll have to assign that then we'll be able to come in and overwrite to string inside of our dog object and return we'll be able to call the super version of to string just by putting super in front of it you see this just easier and then we can say dog is named and pass out the name like that and now we'll be able to come down inside of here if you're having trouble seeing all this stuff just go in the link in the description and get all the code at one time and we'll say pass in Rover and we'll pass in Paul as Rovers owner and now we can pass in print all this information out just to prove that everything works and then print out all of this additional information on this dog object and then also why don't we come in and also call the two string method just to show how that works by calling Rover to string and then let's call the static function as well to generate a new animal object will call it Bowser you can see we can do this as well and then we can print some information out about this new Bowser animal object and call to string of course because it exists there and there you go and now if we go and copy all this we're going to be able to throw it over into scratch j/s and test that it actually all worked and run and you can say Rover is owned by Paul animal is named Rover dog is named Rover and here is all of our Bowser information so there you go guys there's a rough overview of how object-oriented programming is going to change in the next version of JavaScript now let's take a look at some cool design patterns and how to implement those inside of JavaScript okay so now I'm going to cover some design patterns in JavaScript so I'm going to cover four of the most common starting with the singleton pattern and Singleton's are basically used whenever you know that you'll only ever want one object to be created of a specific type so let's say we want to create a game character that's going to have fixed statistics I'm going to come in and define object called hero and it's going to be given a name when it's created now what I'm going to do here before I create a new hero object is I'm going to check if the object already exists and how we can do that is go if and then we could say type of and hero instance and then check if it's an object if it's an object that means it's already been created and in this situation which is created we can just go return hero instance and return the only hero object that will ever be created otherwise what we're going to do is allow them to command and create the first hero object and to do this they'll go and find the value for name and then we'll go hero instance is equal to this and then finally return that new hero object so it's quite simple to create a singleton now let's go in here and actually test that it works so we'll go and create a hero Derrick and he will be hero type and his name will be Derrick of course then we could say our hero is called Derrick hero and get the name and then just to verify that this cannot be changed we're going to come in and we're going to create a new hero and let's call this Paul hero because remember we're making a game in which we're only going to have one hero so doesn't make sense to have to we're going to verify that this works and it will call Paul hero if we execute that you can see that the name stays as Derrick so we can only ever create one hero type and that's a rough overview of how the singleton pattern works now let's take a look at factory patterns now a factory pattern can be used to generate different objects on request so let's stick with our game analogy here and let's say that we want to generate weapons for our different heroes and they are going to have a description of the type of weapon that they are so there's going to be weapon type and we're going to set that by default to sword because this is a sword and then we'll also define the metal the style of sword and whether it's a magical sword or not likewise we're going to do this let's say that the hero starts off with the option of either having a sword or a bow well we'll just change this to bow then and then set this the bow and then have the default now I left that as metal doesn't really matter what it is let's just leave it as metal we could call it material if we'd like to that works have that set the would have the default be a longbow and have magic be false now what we're going to do is create a weapon factory which is going to generate very specific types on demand so weapon the factory and it's not going to do anything right now here I'm going to define everything underneath now I can say weapon factory and target the prototype and let's call this make weapon and this function is going to be passed a description of the type of weapon that we want to get passed and we'll just go weapon class set this by default to null and then we'll say if the description for weapon type is equal to sword well in that situation we'll set our weapon class the class that we want to use here I'm following a class but it's actually this object just trying to differentiate it there and make it a sword object okay so if they say they want a sword we're going to give them a sword else if in the description for weapon type they say they want a bow well then we're going to pass them back a bow object so let's just have this be weapon class is equal to bow and then else if they don't pass either of those we'll just pass back false and now after we have that defined we'll say return and define this new weapon object for them and then pass in the description so it's going to define dynamically what type of object we're going to create for the weapon and then pass in the description and define all that stuff and I can generate this factory by saying my weapon factory is equal to new weapon factory and then come in and actually define one of these let's call this blade fist is equal to and call the weapon factory and call the make weapon function and then pass in all of the information about the specific type of sword that I want so I want weapon type of course I need to tell it sword so that it knows I'm creating a sword and then metal is going to be dark iron and then style is a Sai type of sword and then has magic let's have that have a value of true and then put a semicolon down here and let's go and print out some information about my weapon if I reload it you can see sword of types I crafted from dark iron prints out on the screen so there's a way of using factory patterns to dynamically create objects inside of JavaScript now let's take a look at the decorator pattern now the decorator pattern is going to allow us to alter an object at runtime so let's go and create a pizza Lytton basically the main goal here is to go and calculate changes in prices based off of different toppings that we add to our pizza I'm just going to add one topping here just keep it simple so let's have the price for a default pizza is going to be equal to ten now what we can do is go create a prototype function called get price and there we go it's not going to get anything passed inside of it and all it's going to do is return the price for said pizza now what we can do is generate another object and that objects going to represent extra cheese that could potentially be put on our pizza and if that extra cheese is added that's going to have a additional price so we want to get the previous price set for our pizza and we can get that just store that temporarily and now we want to create a new price for our pizza which is going to be the previous price plus one dollar let's extra cheese cost one dollar all right so now how we'll be able to add extra cheese to our pizza is let's go and create a pizza object first new pizza stay that every pizza starts off as $10 and if we want to add extra cheese and change the price for our object we just pass in our pizza into the extra cheese object and it's added and now what we'll be able to do is get our updated price for our pizza very very easily and you can add anything you'd want to all these different objects dynamically just showing you a very simplistic overview of how this would work but go in there by all means and play around with it see what you can come up with you can see the cost of the pizza goes from ten to eleven dollars okay so that's how we would use the singleton and the decorator and the factory pattern and now let's take a look at the last pattern I'm going to talk about which is the observer pattern now the observer pattern is going to use a single object that's going to notify many other different objects or observers whenever a state change occurs so what we're going to do is we're going to create what I'm going to call and observe a bowl which means it can be observed by others and this observable needs to have a list of people that have subscribed to be able to be told some bit of information I'm going to use like a stock market analogy here and then we're going to have a couple functions for our observable so prototype and the different functions I'm going to have them and have an option to subscribe of course let's just leave that as subscribe and that's going to be passed a subscriber and then quite simply we're just going to go subscribers pay reference to that object this subscribers and then push on this new subscriber onto that array and what else do we need well they probably want to unsubscribe so let's give them the option to unsubscribe as well and of course one subscriber I don't know if that's even a word but I'm just going to use it is it makes sense and then to unsubscribe we're just going to cycle through all of the subscribers and if we get a match then we are going to take them out of our rack so subscribers length and then increment through all those until we find one and then we're going to check to see if the subscriber in our list is equal to the un-- subscriber that was passed into this function and if they were I'm just going to go this subscribers and I'm going to splice them out of our array and I can do that just by going I and then one meaning that I want to get rid of one item inside of the array and then if I get here I know I found it and I can just leave so I could do something like on subscriber pass back the name maybe I want to come in here and get that and put information out on the screen that somebody has unsubscribed and then do I want to do anything yeah well of course I'm going to need to publish some information to all of my subscribers so let's create a publish function and there that is and it's going to publish some type of data that's going to need to be shot out to all the subscribers and how I would shoot through all of these different subscribers and notify them that things have changed as I want to use a for-loop this subscribers and then cycle through all of them and meant that of course and then I'm going to need to call this subscribers once again I'm going to call a function that is called received data which is where they're going to receive this information and I have to create that of course and then come down here and that's all that I need for that so that's going to be the observable who is going to push data to all the of the observers so now let's go and create a brokerage house let's call this organ Fannie very classy name and of course it's going to have organ Fannie and it is going to have a receive data function inside of it I could have used inheritance to get all this but I'm just trying to keep this simple and it's going to output some information on the screen something like this name received your info and then it's going to push out whatever info was actually passed inside of it and there we go and then let's create another top-notch investment company maybe we call this one Boldman yaks there they are and it's going to do exactly the same thing I'll put all that information and now what I can do is create a new observable and just go new observable there's an observable object and I can subscribe people to it easily so observable and subscribe and then I'll pass in the organ phani object and then we're gonna do exactly the same thing for the Boldman yaks we are and then I can quite easily come in here and push information out to all of these different subscribers just by calling publish and let's say I want to put something out like IBM at certain price 145 30 or something like that and we'll be able to come in here and check or why don't we just unsubscribe somebody just to show that that can work as well and we'll just go observable and unsubscribe and who's going to unsubscribe from our wonderful service let's say it's the organ Fannie group and remember whenever unsubscribe is called the sky Fair it's going to return the unsubscribers name and you can see here whenever the data is passed it's going to call receive data for all these different objects so that's going to print all this information out on the screen each time one of those updates and then we could say something like on subscribed and then we can come in and also notify that another pricing change has occurred with IBM and execute it and you can see we're going to finally receive your information this comes from this we passed that with publish we jump up here to publish you can see what it's doing it's calling receive data on every single subscriber and receive data prints all this information out on the screen you see that organ Fannie unsubscribed and then you can see that only Boldman yaks was then notified thereafter so there you go guys that is a insane amount of information about object-oriented JavaScript and please leave your questions and comments below otherwise till next time

Channel: Derek Banas

Views: 388,065

Keywords: JavaScript (Programming Language), Object-oriented Programming (Programming Language Paradigm), Programming Language (Software Genre), ECMAScript, ECMAScript 6, Object Oriented JavaScript, OOP JavaScript

Id: O8wwnhdkPE4

Length: 60min 35sec (3635 seconds)

Published: Mon Sep 28 2015

Reddit Comments

[u/ninja_m0nkey]

That is one of the better tutorials or videos I have seen on prototypes/closures/inheritance.