Learn JavaScript #23 | Extending Classes

Alright, guys. So, I hope you've been playing around with classes a little bit and figured you know some stuff out about it that maybe I haven't mentioned. If you come from another programming background, and that's most likely going to be the case, you probably have a pretty good idea on how to do numerous things involving classes, and objects. For everyone else, and even just as a primer, what we're going to be doing in this video is extending classes and this means we're going to subclass them. So, I'm going to be creating a new class, a couple new classes, that are going to extend the animal class. So, when we think about certain animals, let's say there are distinct differences between a fish and dogs. For instance, dogs can bark, so they obviously have a bark volume. Dogs wear leashes, so there leash must have a color. And fish swim, so they must have a swim speed, for instance. Now, obviously these things could be processed in a more vague way, and let's say the speed, the swim speed, could actually just be called speed because dogs also have a certain speed that they move at. However, for the sake of this video we're going to be creating two new classes, so let's go ahead and extend the animal class. So how we do that we type the keyword class, so we're creating. The new class is called dog. Now in order to inherit all of this from the animal class, we then put extends Animal. So there we go. We have a class named dog. Now, I'm getting sick of these warnings. I'm probably going to try a different code editor at some point to see if we can get these to go away. So, basically, what we do here is we're going to create a constructor, and it's going to take all the same data and then some. Let's go ahead and create the constructor method. We're going to take name, height, weight, barkVolume, and leashColor. So, at this point in order to instantiate this object as an animal and have access to all these properties and methods that are in the animal class, we need to call what's called a super constructor. How we do that is its keyword you just type in super, and in here essentially it's the same as writing animal. So, we're going to just pass in the same values that we would pass in to the animals constructor, which would be name, height, and weight, and this is what I mean by I hate these these lines. It says Superclass constructor invocation should be in constructor body. Which is strange because that's exactly where it is. However, I want to make sure that's indented properly. There we go. So then once we get that created, then the dog object that we create has a name, height, and weight, but we're also going to give it a bark volume and leash color. So let's set this.barkVolume equals barkVolume, and then this.leashColor equals leashColor. So, at this point the dog has a name, a height, a weight, a bark volume, and a leash color. So, I'm going to create a method here that we're going to be calling, and let's call it bark. What we're going to do is depending on the volume level which is going to be between 0 and 1, actually zero and a hundred that makes it easier, what we're going to do is if it's above a certain amount it's going to bark loudly, otherwise it's going to bark quietly. So, if it's over 50 it's going to be a loud bark. So, if this.barkVolume is over 50 we're going to console.log "BARK BARK!" Instead, let's type "The dog barks...actually, let's use the actual name. So, this.name, "barks loudly!" If it's under 50, we're going to console.log this.name, "barks timidly." There we go. So, now if we save this and refresh our page we shouldn't see any errors, but we also shouldn't see anything happen yet. So we actually need to go create, we need to instantiate the dog, and then the dog object, or the dog class, we'll go back to the animal class and then instantiate that, and then kind of combine them together. So, var king = new Dog, we're going to pass in "King" is the name. Its height, it's a very big dog so we're going to say it's 45 inches tall. I'm not sure if that's big or not. It's going to be 92 pounds. It's going to have a bark volume of 72, and a leash color of red. And in here I'm going to put the volume. This.barkVolume, there. And, I'm just going to copy and paste this into the next line as well, there we go. So, now what I'm going to do is I'm going to say king.bark. I'm going to save this and refresh, and it says King barks loudly! As you can see, the constructor of the the parent class is being invoked here. If I remove this and save it and refresh, as you can see it's giving us an error. So, that's why we need to call the super constructor, and then everything works well. Now, what we're going to do is we're going to go extend the animal class again, so I'm going to say class Fish extends Animal. Now the same thing in here we're going to create a constructor, it's going to take in a name, height, weight, and a swim speed. So, again, we need to call super with the name, height, and weight, and then we're going to set this.swimSpeed = swimSpeed, and then we're going to create a method here called swim. Now if the swim speed is above 50 he's going to swim around fast, so quickly. So, if this.swimSpeed is higher than 50, we're going to console.log the name. So this.name "swim was around quickly!" Speed is going to be this.swimSpeed, and then we're going to close that. If it's not about 50, we're going to console.log this.name, so it's going to print out the the fish's name, comma "swims around slowly." And we're going to say speed is going to be equal to this.swimSpeed, and we're going to print that out here. No, I can't use plus signs because that's going to try...oh, yeah, I can. Okay, this should work. I've been working in Python a lot lately. So, what we're going to do now is we're going to create Goldie, it's going to equal two new Fish. The name is going to be Goldie, the height is going to be 2 inches, weight is going to be .1 pounds, I'm not sure if that's reasonable, and the swim speed is going to be 43. And then under the dog barking, the dog barking is going to scare the fish, so Goldie is going to swim. Let's save this and refresh, and as you can see it says created animal, created animal, then King barks loudly, volume 72, and Goldie swims around slowly. Now we can give Goldie a better chance of surviving if we make them swim around quickly, so let's go ahead and change the swim speed to 77. Save it and refresh, there we go. So, what we're going to do is we're going to, we're going to kind of do a calculation here, and if the swim, or if the fish swims quicker the dog is able to run and we're going to determine that based on their size, so 45. So we're just going to do a simple comparison here. So in the swim method we're going to pass in king.height, and then in here we say chaserHeight is what we're going to pass in there, and if this.swimSpeed is greater than chaserHeight...actually, you know let's use speed, let's give the dog speed too. Okay, so he has leash color and speed, and then this.speed is going to be equal to speed. So we're going to come down here and we're going to give the dog a speed of 52, and we're going to say king.speed here. So, change this to chaserSpeed and we're just going to compare the two speeds. So, if this.speed is greater than, sorry this.swimSpeed it's greater than chaserSpeed, we console.log the name. So this name "got away!" Else, I'm going to console.log "was caught!" Alright, so let's save, let's go ahead and refresh, what we should have now is a method that says Goldie got away. Alright, so King barks loudly, Goldie swims around quickly, and Goldie got away. Now, if we change the speed to less than the dog's speed, so 46, I'm going to save it and refresh, and because Goldie swims around slowly he is caught. So that was a neat little minigame kind of thing, or a little program that we built, that was fun. But, as you can see, we can extend the animals, we can extend any class really, we could even extend dog and create a, you know, Labrador if we wanted to. You can continue extending classes and subclasses however far you want. So, that was how to extend classes.