Object Oriented JavaScript Tutorial #8 - Class Inheritance

so then this is looking pretty good we have our user class and we can create these new instances of users down here and they have all these different methods and we could also do method chaining now so all of this is looking pretty good however and now want to introduce the concept of inheritance say for example on this website we have users right we could have as many users as you want one hundred two hundred etc and they all have these different methods and these different properties now also on the website I'd like to create some special kind of users which are admins right and these admins will have some different methods associated with them now at the end of the day these admins are still uses they're still going to have all the same properties like email name score and all the same functions like log in log out an update score however they're also can have extra methods like the ability to delete a user now I don't want to attach a delete user method to this thing right here because I don't want any user to be able to delete a user just admins so what we need to do really is create a new admin class with that method inside it but the problem is we also want all of this stuff inside the admin class as well because we want all of this same functionality so what we could do is create that class and we could copy and paste all of that into that I've been class and then also add on the extra delete user method or whatever other methods and admin might have as well however that's not the best way to do it instead what we could do is use plus inheritance so what we'd like to say is okay yeah we will create an extra admin class so let's create that first of all we'll say class admin like so and this admin class is actually gonna inherit from the user class because at the end of the day an admin is a user it's just a specific type of user with some extra bits and bobs inside it so we want to inherit all of this stuff from the user class but then just add some extras right now we can do that very easily using this Plus syntax and the way we do it is by saying okay yeah class admin then extends and this is gonna extend this class from another one which is use it okay so now whenever we create a new admin what it's going to do is still give it all of this stuff right here it's going to run this constructor to give it all of these different properties and associate all of these different methods with an admin when we create one so that's good we're creating this admin with all the same functionality and properties as a user now that was easy but now what we can do is pass in some extra functionality into this admin class which the user doesn't have so I wanna create a delete user function and by the way like I said we don't need the constructor in here if we don't have a constructor in the class that extends from another then it will just use this constructor right here okay which is what we're doing so delete user this is gonna be the method that I want to use for deleting a user now first of all what we need to do is create a new array which is gonna store the users because I want to filter through this array when we are actually deleting a user so I'm going to save our users it's gonna be equal to user 1 which we created right here also user 2 like so ok so we have those two users in this arena now what I'd like to do inside this delete user method right here is passing the user that I want to delete so when I call this delete user method we're going to pass in as an argument the user we want to delete right then what we're going to say is we want to update this uses array because we're going to delete one of them out of it we're going to fill some one out of it so we'll say users is equal to users dot filter now the filter method in JavaScript allows us to cycle through each element inside the array and then filter one of them or more of them out of the array now each time we cycle through the array we get access to the individual item so what we can do here is pass individual item as a parameter to this es6 error function so we're taking that individual item inside this function now and we can check if that user this thing right here is equal to the user that we've passed in if it is equal then we want to delete that user from the array we want to filter it out now inside this function if we return false for a particular user it's going to remove that user from the array if we return true then it's going to keep that user inside the array so what we need to do is say return either true or false and we're going to say you email which is the email property of whichever user we're cycling through at the time okay and if that is not equal to user email then this is going to be true right so we're cycling through the array if the email of this one is not equal to the email right here then this is going to be true and we're going to keep that user in the array if the email of this one is equal to the email of this thing right here this is now going to be false therefore we're returning false we're going to filter that out of the array now okay so then now we have that filter method the next thing that we need to do is actually create an admin we don't have an admin yet so let's do that well save our I'm just gonna call this admin you can call it what you want on this time we say not new user but new admin all right so now we're creating this new admin class we still need to pass in an email and a name because we're still calling this constructor function right because we're saying that admin extends from user so we're still expecting all of this stuff right here so let's pass that in so the name is gonna be Shawn at ninjas comm and then I'll that's the email rather the name is gonna be Shawn okay then so we have this admin them so now let's say okay admin dots delete user and the user is gonna be user - all right so I'm gonna try and delete that now from this array so what down here is in fact we'll need to call this after this array has been defined and then underneath that I'm going to console dot log users just to see if it has in fact worked so let's save this now and run it and now we can see that uses just has one use inside of it so we've removed user 2 now what I want to do also is add in admin right here because at the end of the day this admin is still a user right this time or delete user 1 so we're deleting array of this time so let's save that see if this works okay so now we still just have to so we've deleted one of the users one of them still remains I'm the admin and you can see Yoshi remains and Shawn and ninjas calm remains as well so we have now deleted user 1 which is right right here so cool so what we've done here is create a new class called admin which is inherited from the user class it's inherited all of this stuff right here and it can demonstrate that because I could say admin dot log in like so and that's still gonna work right if we say admin then we're still going to see down here that inside the proto we have delete user because we have that on the admin class but if we go into proto again and we'll explain what these protocol things are later on in the course then we can see we've inherited these two functions or rather these three functions as well which is on the user class alright so that's how we inherit things in separate classes now obviously if we try to do something like this I'm going to comment out this if we try to say user one delete user and passing user two then this shouldn't work because we're not giving ordinary users this delete user method they shouldn't have access to that that's only for admins right here so let's save it and make sure that this doesn't work and you can see user 1 delete user is not a function so that's cool we're just extending the user and giving admins only this extra method right here