Learn JavaScript Episode #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.

Add a Comment

Your email address will not be published. Required fields are marked *