ES6 Classes

by Tony G. November. 09, 17 0 Comment
ES6

The following blog post is part of our ECMAScript 2015+ series of tutorials. In this part, we will ease into ES6 Classes by giving you a practical example for game UI. It is important to note that Coherent GT 2.0, which will be released at the end of this month, supports ES6 Classes.

What is an ES6 Class

Classes are introduced in ECMAScript 2015. The JS class introduces a more common class syntax compared to other object-oriented programming languages. The class syntax is a syntactic sugar over the existing prototype-based inheritance. The syntax also provides newcomers with more understandable and simpler way to achieve the same results without using the sometimes confusing prototype syntax.

There are two ways to define a class by using either class declarations or class expressions.

Class declaration

Class expression – named or unnamed

Named:

To refer to the class inside of the class body, you have to create a named class expression.
The name is local to the class body {} – it will be visible only in the scope of the class expression.

Unnamed:

Note: You can only access a class after you have declared it as the classes are not hoisted.

ES6 Class methods

The ES6 Classes have three method types – constructor, static and prototype.

Constructor method

The constructor method creates and initializes an object within a class.
Only one constructor method is allowed within a single class. As it is optional, if you do not specify one, a default constructor is used.

Prototype method

A method, accessed using the instance of the class, is known as a prototype method. These methods can be inherited and used with objects of the class. The keyword this inside a prototype method is relative to the respective object (instance).

dog.__proto__ === dog.constructor.prototype
dog.constructor.prototype === Animal.prototype

Static method

Prefixing a method definition with static creates a static method. A static method is assigned to the class, not to its prototype. The method cannot be directly called on at instances of the class.

In other words – a static method cannot access data stored in specific objects and can be called from the class itself. If you do not need a method to belong to any particular object, a static method is the way to go.

Let’s look at the example below, which includes the three class methods.

A static method is generally used to create utility functions with common functionality that can be used anywhere in the application. We will show you an example:

There is no reason to pollute the created instances of the class with another prototype method if it is not critical for the instance to own it.

Inheritance (extends keyword)

The option class comes with a way to assist with the prototype syntax and prototype inheritance.

The ability to inherit a method from a parent class is as easy as:

In this case super(fuelEconomy, seats) calls the parent constructor and adds those properties to the newly created instance.

the super keyword

As mentioned above, the super() calls the parent (class) constructor.
super() must be used if a subclass has a constructor method. Also, it needs to be used before this – it is not allowed before superclass constructor invocation.

With super we can also call static methods of the parent class:

MagicalWord.sayAllTheMagicWords() calls the inherited static method openKeyword() from the class Word.

UI Example

Lets’ do Profile, Inventory and Weapon classes to populate the Inventory with
weapons.

and the last output – This weapon has X DPS. -> where X is a randomly generated value.
As you can see the damagePerSecond method can also be used with a given weapon.

Conclusion

Although there are some disputes in the JavaScript community if classes are a good or a bad thing, you can clearly see that they come with benefits. ES6 Classes are a good guide to code unification.
The class syntax is on one level, a syntactic sugar over the prototype syntax, and it can help you write code that is less prone to error. The code looks simpler, cleaner and more readable. Constructors and static properties are subclassable out of the box while inheritance is build-in. Since classes are build-in and there is one way to use them, there is no need for libraries and the code becomes portable between frameworks.

For more interesting information regarding ES6 Classes and their possibilities follow @CoherentLabs on Twitter or start a discussion in our Forum.

Good reads:

Object-Oriented JavaScript — A Deep Dive into ES6 Classes

What’s the Difference Between Class & Prototypal Inheritance?

Social Shares

Related Articles

Leave a Comment

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

Time limit is exhausted. Please reload the CAPTCHA.