Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Ecma 1
  • Overview
  • Transcript

6.2 Classes

ES6 brings classes to JavaScript as a syntactic sugar overlaying JavaScript's existing prototype-based inheritance. In this lesson we'll look at this new way to create objects and deal with inheritance.

6.2 Classes

Hi folks. In this lesson we're going to look at JavaScript classes in ES6. JavaScript's inheritance model is based on an objects prototype and as such is known as prototypical or prototypal inheritance. With the introduction of classes in ES6 nothing has actually changed. JavaScript still uses the prototypal inheritance that we have come to know and love. Able supports EF6 classes through transformation. So now we'll need to switch back to the AS5.js file and compile the code down as we're running through the examples for this lesson. Let's just do that quickly first of all. Classes are defined using the new class keyword. This is a class declaration and it looks very similar to a function declaration, except that there are no parameters 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 error will be thrown if a class is used before it is declared. Another similarity to functions is that we can either use class declarations like we have here, or class expressions like this. Expressions can be unnamed, like here, or they can be named. Naming a class will allow better debugging. So it is good practice to do this. The body of the class is added between the curly braces. Setting the constructor for a class is done using the special constructor property. In this case, the constructor accepts a name, argument and it sets this as an instance of the objects that the class will create called name. We can also define prototype methods that can be called on object instances In this case, let's just return the name in uppercase format, so we can use the constructor now to initialize new employee instances So we need to transfile this down to ES5. And let's take a look in the browser now. So we can see that the employee's name has been shouted out in the console there. We can also add static methods which are available through the object type rather than through instances of the class. To do this we just need to prefix the method name with a static keyword. This method is called on the employee type, rather than individual instances of employees. Subclassing is also super simple using another new keyword, the extends keyword. This is the syntax for a named class expression, this subclasses another class. We could also use extends with a class declaration as well. In this case, we say that the boss class extends the employee class. Let's add a new method called work to the base employee class. To override this method in our subclass, we just specify the same method name and customize the behavior of the method. So we'll do this down in the boss class. So let's go ahead and create an instance of a boss object. Sometimes we might want to call a method on the base class that we're extending within a subclass. We have access to the base class within a subclass via the super keyword. In this case we could make the boss class, called the shout main method of the employee class. And this time the boss's name is converted to uppercase. We don't particularly need to use the super keyword in this case as the shout name method is accessible by the prototype anyway. But if we do need to invoke a method on the superclass, it's now extremely easy to reference the superclass using the super keyword. So in this lesson, we looked at the new way of defining classes in ES6. We saw that we can define classes using class declaration or class expressions using the class keyword. We learned how to create a constructor for the class with the special constructor property and how to add instance or static methods. We also saw how to create subclasses that extend the base class using the extends keyword. And we saw how to call methods on the base class using the super keyword. Thanks for watching.

Back to the top