7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.3 Class Inheritance

Classes just make everything easier, and class-based inheritance is no exception. It's sugar for prototypal inheritance, and as such, is true inheritance. Sweetness again!

4.3 Class Inheritance

In the previous lesson you learned about prototypal inheritance and how to inherit one type from another. You also learned how cumbersome it is to do that. It requires a lot of extra code and well, compared to other languages, is just plain weird. However it works, it's what we've had to do for the past few years. And so while we can complain about it, you know there is the fact that it works. However with ES 2015 everything is going to be simplified because of classes. Now if you'll remember whenever we first looked at classes, we saw how easy it was to define our own custom data types with a class. Well we are going to see that it is equally easy to inherit one class from another. So in this lesson we are going to create yet another employee data type. It is going to inherit the person data type. And I chose to use the person class that did not incorporate privacy, just to keep things as simple as possible. Now, we could of course, apply the same concepts without any issues whatsoever, but once again to keep things simple, I chose this version of the person class. So let's start by creating a file for our employee class. And we are going to put this inside of its own module. So we will eventually need to import person. And, in fact, that's the first thing that we are going to do. So after we create the employee file, we will import. We want to import person, from person.js. So that we have that, so that we can extend it because we can't extend person without having access to it. So next we want to define our employee class and we have a keyword called extends. And we are essentially saying that this employee class is going to extend person. And then we need the constructor for our employee. So we will have the firstName, the lastName, and the position. Now in the previous lesson inside of the constructor we had to call the person constructor in order to create the first name property. Well, we essentially have to do the same thing in this lesson except that we know how to say person.call. Instead we have another key word called super. This refers to the superclass. So the superclass, in this case, is person, the subclass or the child class is employee. So we call super. We pass in firstName, lastName, and there we go. That's going to set up the first name and last name properties. Then we just need to set up the position property, and we will do that there. So we are almost done. We have our properties. The next thing we need to do is override the greet method. So we have greets. We need our name that we are going to greet. And in the previous lesson, we had to do something like this. Person.prototype.greet.call this name and blah, blah, blah, blah, blah. Now we don't [LAUGH] we use this super keyword once again. We call the greet method. We pass in name. And then we concatenate our position. So this.position. We of course need to return this, so that we can actually see the result. But that's it. As I said this is going to greatly simplify the way that we inherit one type from another. And I can't wait to write this type of code. So let's export this. So that we can then import it inside of index.html. Now we don't have to import person here, because we are already doing so inside of employee. So we are going to import employee. And then, that is going to be from employee.js. And we will new up employee. Now, we do need to pass in a position for John Doe. Let's make John Doe the manager. And then we will see the results in the browser. So let's go there. Let's refresh. And we will see, Hello, Jim. My name is John, Manager. Now, the super keyword is useful anywhere within the class. We don't have to use it just inside of the constructor or inside of a method. We can also use it for a property as well. So let's go back to the person class, and let's modify this so that we have a full name property. This will be a getter, we'll call it fullName and this is going to return this.firstName concatenated with this.lastName. Now we didn't do this in the previous lesson because a lot of the concepts that we talked about in parasitic inheritance is applied to prototypal inheritance. If the lastName property was defined with the define property method, then we would have to get the property descriptor, we would have to get the get accessor and execute that function just as we did with parasitic inheritance. But with a class we don't have to do that. Now we have our fullName property. Let's use that the inside of the greet method. So inside of employee, we won't have to override greet. So let's comment that out. But instead we want to override employee. Now we want the same functionality that will give us the first name and last name, but we also want to tack on the position as well. So we will have get fullName, and here once again we use the super keyword, although we need to do return, don't we? So we will have super.FirstName, or I'm sorry, fullName and then we concatenate that with our position. So we get the same result, except that now we have this full name property. So let's go back to the browser, let's refresh, and we will see essentially the same thing. Hello, Jim. My name is John Doe, manager. Now the great thing about inheriting one class from another is that it is still all prototypal inheritance. Everything that we did in this lesson is essentially the same results that we got in the previous lesson. So classes are going to greatly simplify the way that we write our code.

Back to the top