Class Inheritance

[00:00:00]
>> So we also had some questions before about inheritance, I think, and you can inherit from another class using the extends keyword in the class declaration. So, for example, I can make a special version of a meme which is a GifMeme, obviously superior to a non-animated, non-disturbing for folks with motion sensitivity image, right?

[00:00:29]
No, we can't have that we need flashing lights at all times. [LAUGH] And what we need to do if we want to extend a class is call, in our constructor method, call the constructor of the parent class. So in this case, within the GifMeme constructor, on the last line of that constructor function we are calling this special function super.

[00:01:03]
Which has its own specialness in JavaScript, that calls the constructor method on the parent class. And we have to do that if we're extending a class. We have to do that before we get access to this. So if we're extending classes, we have to first of all call that super.

[00:01:25]
Okay, but Anjana you said you have to first call the super so why is there code before the super? Well, because we can do things in an extended class like we can, for example, in this case, make sure that you are passing in a correct Gif file for this new meme.

[00:01:41]
And if not, refuse to instantiate the object, and then call super. And then we can go on after this line that calls super, we can access this, do whatever, set up new properties, have whatever fanciness we need in our GifMeme. So, for example, if I try to instantiate a GifMeme with pooh.jpg, can't do it.

[00:02:08]
That's a failed pooh [LAUGH]. And so, if we have a GifMeme with a .gif, okay, it passes that first check. And it gets to the parent constructor which remember had that little whisper with the secret images console log. And so that's being called we can see that because we didn't write any console login code in our GifMeme constructor.

[00:02:33]
So we've got now a way to access any of the properties on the parent class, any of the methods and whatnot, unless we override them. In which case we'll get the more specific version from the GifMeme class. If I wanted to make a new secret image getter or something that let's say makes sure that if you set the image.

[00:03:00]
You're Setting the right, sorry, you're setting the right type of file that you can't just set the image to a .jpeg, for example. Yeah.
>> Do you need to override the constructor?
>> Do you need to override the constructor?
>> If you don't make one, will it just use the super constructor?

[00:03:18]
>> If you don't, let's find out. I think I understand what you're asking. Okay, let's see. When in doubt, sorry
>> My understanding is you always have to call super in a constructor.
>> I think it's not gonna be happy but there's only one way to find out and that's to make JavaScript do stuff it doesn't wanna do.

[00:03:35]
So let's find out, okay? So if I do a class GifMeme extends meme. Well, I don't have a meme, okay? [LAUGH] Class meme we're just gonna this is just gonna be a very simple this.meme is yes. Okay, oops, what did I do? I called that that's not how it works.

[00:03:57]
I always do this for some reason I'm to use two functions as you can tell I'm not a big class-er, I'm not classy. Okay, so we don't need those parens. Okay, great. So now I can do, let's just make sure, I can make a new meme. Okay, m.meme.

[00:04:18]
Yes, okay great. [LAUGH] Such a useful object we have okay. Now if we try to do a class GifMeme extends Meme. And so if I understand correctly you're saying just like with nothing happening. Interesting, okay, now let's try a GifMeme All right, well, JavaScript doesn't care so that's a little surprising.

[00:04:53]
And again, I find a lot of stuff about the way this object orientation works in JavaScript sometimes surprising. Well, it's hard to know what magic JavaScript is gonna do under the hood, where it's going to be strict about stuff, like no hash property for you or where it's just gonna be like, okay.

[00:05:15]
You wanna empty a completely identical object to the parent? Sure, knock yourself out. I think what this is tantamount to is essentially assigning an alias to the name of the class. So perhaps that might be useful if for example, you're trying to support an older name for the class or something like that.

[00:05:40]
But you don't want to have to maintain two separate ones or anything like that. So today we learned. Amazing question, sorry
>> Yeah what if you wanted to just like override one of the methods?
>> What if you wanted to override?
>> Would that be a use case for extending this without redoing your constructor?

[00:05:58]
Let's say you want on your GifMeme you want to actually override what the image
>> Right, so for example, we could do like a class PngMeme that extends Meme and maybe has a like a method that, okay, let's go back. What did it mean, sorry.
>> Like the .yell

[00:06:28]
>> Yeah, yell okay. Right, exactly so let's say we have a new yell method that, whoa, okay. That gives us a Very helpful yell, okay. [LAUGH] All right let's see what we get here. So now if I do a new PngMeme with no data, It has worked so what have you learnt?

[00:07:10]
>> No.
>> [LAUGH]
>> Just out of curiosity, if you do a pm.meme, you should get yes, right? Okay, can you scroll back to where you defined the mean classic? Again just let me look at that again.
>> Mm-hmm.
>> So just .meme, I got it all right.

[00:07:27]
>> Yeah and so this is where
>> So meme is yeah, right. That's a attribute as opposed to
>> Right.
>> Object or a method.
>> Yes, so essentially everything's a property. We got the JavaScript world where basically JavaScript only sees, it's like it has object colored glasses on that sees everything as an object and it sees every dot value as a property.

[00:07:58]
If the value of that property is a function then we call it a method. But that's, about the end of the difference. And so when we are, when we have public properties and methods like .meme, .yell like I said before we don't have to like declare them right here before the constructor but those private ones we do.

[00:08:21]
Was there another question?. Okay. So yes so okay, what are we learning? We are learning again that there are now these like facilities, these these keywords class, extend, super, etc that help us do this kind of object oriented programming in JavaScript. And also we should keep in mind that these are built on top of the underlying prototypal inheritance model.

[00:08:51]
That has not gone away. And there's a lot more to say about classes, which again, MDN
>> Is our friend.
>> Yay, okay yes. MDN is our friend [LAUGH] just making sure everybody's awake. The things that you can kind of mess with with classes are hopefully kind of limited now.

[00:09:17]
They did think long and hard about how to do this and how to implement stuff like that. Private methods and private properties and things so there is a little bit more, what's the word? Rigidity than our usual JavaScript functions, for example. But that said, sometimes you might find discrepancies if you're used to, again, these constructs and these concepts from another language.

[00:09:42]
So again, just keep in mind under the hood, it's all objects with prototypes. And it's functions creating objects with prototypes and setting that all up for you. And that's essentially, this is essentially a nice kind of, hopefully more dev friendly interface on top of that.