7.5 Classes

Hi folks, in this lesson we're going to take a look at classes in JavaScript. As we've learned already, JavaScript's inheritance model is based on an object's prototype, and as such is known as prototypal inheritance. With the introduction of classes, quite recently in JavaScript, in ES 2015 Nothing has actually changed. JavaScript still uses prototypal inheritance. Classes are just a syntactic sugar laid on top of the prototypal inheritance model that just makes working with objects JavaScript a bit easier and a bit nicer to write. So, when we were creating our person constructor function earlier one in the course, what we were doing basically is creating a person class and using that constructor to create instances with that classes. Classes just make it a bit easier and nicer to create these kinds of classes. Let's take a look. So classes are defined using the class keyword. So this is a class declaration. And it looks very similar to a function declaration, except there are no parentheses following the class name. One important point to note however is that while function declarations are hoisted to the top of their scope, class declarations are not hoisted. So an arrow will be thrown if a class is used before it gets declared, unlike a function. Another similarity with functions is that we can have class declarations, or class expressions. And just like functions, class expressions can be unnamed, or named. So the body of the class is added between the curly brackets. Setting the constructor for a class is done using the special constructor property. In this case the constructor accepts a name and this name is set as a property of any instance. Objects created using this class. We can also define methods that all instances of the class will inherit. So in this case we've added a method called shout name. So any employee objects that we create using this employee class. Will automatically inherit this shout name method from the classes prototype. This all happens behind the scenes. We don't have to do anything like updating the prototype ourselves manually. JavaScript just takes care of it for us. So let's now use this class and create a new instance. And let's just take a look at the output in the browser. We can see that the bulk object is shouting its name property. We can also add static methods which are available through the object type rather than through instances of the object. To do this, we just prefix the method name with the static keyword. So this static method can't be called on instances, but it can be called via the class itself. Okay, so you can still see that the string has been reversed. Subclassing is also very simple using another new keyword, the extends keyword. So we can extend the employee class with a new boss class. So let's go back and add a new method to the original employee class. And we'll just call this method work. Now, if we want to override this method in a class that extends the employee class, that's actually really, really easy. All we need to do is provide a method of the same name in the extending class and customize the behavior of the method however we want. Let's go ahead and create the new instance of our boss class. And now let's invoke the work method of each of our objects And we can see that the overriding has worked in exactly the way that we would expect overriding a class method to work. Sometimes when we are extending a class, we might want to invoke a method on the base class from inside the extending class, or the subclass. We have access to the base class from within a subclass via the super keyword. So let's say that when a boss works, they also shout their name. Now, the boss class doesn't have its own shoutName method but, it can still invoke it from the base class. So this example is a little bit contrived. And it's just to show you how we can invoke the method of a base class from within a subclass. It's not something we actually need to do, it's just an example to show you how to do it, and that it is possible. Okay, there we go. So if you do need to invoke a method of the base class from a subclass, it's very easy using the super key route. So in this lesson we looked at a relatively new way of defining classes. Which came to JavaScript as part of ES 2015. We saw that we can define classes using class declarations or class expressions. And that we do that using the class keyword. We learned how to create a constructive for the class with the special constructor property and how to add either instance or static methods to the class. We also saw how to create a sub-class which extends a base class using the extends key word. And we saw how to call methods of the base class. From the subclass using the super keyword. In the next lesson we're going to look at one of the greatest features ever added to JavaScript, ES Modules. Thanks for watching.