RPGMaker MV ES6 Part 4: Classes

Introduction

Today we’ll be going over ES6 JavaScript syntax for classes vs ES5. We’ll also be going over the features of classes today in ES6, which are as follows:

Features

  • Class Inheritance
  • Base Class Access
  • Getters and Setters

However, first, we must talk a bit about classes in general.

Classes

Classes in a programming language are a way to bundle similar functionality together to create a cohesive representation of some object. You can think of a class as a template for what an object should be, and what it should do. For example a car class.

A car class in a language may have a couple properties that define parts of the car (make, model, year, the color of the car, how fast it is, etc). The other thing a class should have is actions that a car should be able to take(drive, reverse, turn, blow the horn); these are called class methods.  These two parts are what are kept inside of the definition of a class. However, a car doesn’t apply to RPGMakerMV, thus, in our case, we’ll be going over an example of a window in RPGMaker MV after going through each feature. 

Class Inheritance

Class inheritance is when one class inherits  from another; think of gaining a new job class in a video game after leveling up your previous job. Or, another example is a dog inheriting properties from a mammal. The class you inherit from is considered the parent and the other is considered the child. The value of class inheritance is that we can use features from a previous class without having to rewrite a lot of the same stuff. This leads me to the next point of base class access.

Base Class Access

Base classes are the parent of the child, as mentioned above. Base class access is when we use a property passed down from the parent, or a method that exists on the parent. A good example would be in RPGMaker MV when we access the update method from a window we inherited from to get the same functionality without writing it ourselves. Sometimes we may want to access properties directly in another part of our code, which leads me to getters and setters.

Sometimes we may want to access properties directly in another part of our code, which leads me to getters and setters.

Getters And Setters

Getters and setters are a way to get or set a property on our class once it’s been instantiated (when we create a new object). This means we can modify a part of our object once it’s created, or get some information from it. The ability to use getters and setters in classes  was not available in ES5, and thus is something that could only really be replicated by writing functions for modifying or getting information from an object created from a class template.

Code Example

As you can see in the example, creating a class in ES5 is a lot more work, because we have to create a function, then modify the prototype to inherit from a class. In ES6, all we have to do is use the extends keyword to inherit from another class, and creating the class is simply using the class keyword. 

If we go further down, you can see an example of base class access; accessing the base class is as simple as using the super keyword; this keyword tells the program that we want to access a property on the parent. It’s a lot cleaner and easier to read.

Lastly, we have getters and setters. In ES5, we have to write a function and add it to the prototype to set our get a property.In ES6, we simply add the get or set keyword in front of our class method to tell the program that this is to retrieve a property from our object or modify it.

Conclusion

Hopefully, this information on classes was helpful to you. And, you can use this in your code to improve the quality.

Leave a Reply

Your email address will not be published.