How To Create Classes in ECMA5 in CreateJS Style

admin Jan 1, 2017

Currently there is a lot of hype put on ECMA6. ECMA6 is a big improvement which makes many of the old methods obsolete. However, at this stage if you want to develop html5 games it’s hard to find a stable html5 game framework which allows smooth development using ECMA6.

ECMA5 is a prototype based programming language which makes it also an object oriented language but in different way compared to more conventional object oriented languages like java or c++. ECMA5 object does not have direct support for basic object oriented features like inheritance, but the same behavior can be emulated using the prototype chain. Every object has a prototype property which points to another object. The object which it points to has in the same way a prototype property. This way a chain is built by the way we define the prototypes until the prototype field is undefined or points to a null value.

There are a few options to emulate class inheritance we are going to use in this post the same style used by createjs.

Namespaces

We start defining the namespace where the class is declared, but we should be aware that there is no namesapce defined in ECMA5 at the languange level. We define a global variable which plays the role of the a namespace. If the namespace variable is already defined we reuse it, otherwise we create an empty object:

this.namespace = this.namespace||{};

Class Definition

The class is defined in the scope of an anonymous function, to avoid a global definitions. We ensure this way that only the namespace is globally defined. The anonymous function is invoked and it adds the new class we create to the desired namespace.

(function() {
    "use strict";

Javascript provides a mechanism to define classes only starting with ECMA6; For Javascript ECMA5 or lesser, is not an object oriented languange. However, we can define functions in such a way that they act like classes.
First we define the function which plays the role of the class, accepting the required parameters. In the function implementation we invoke the constructor. The constructor is not a real constructor, it’s just a function named like this, which we implement later on ad add it to the prototype.

var TheClass = function(param1, param2) {
        this.constructor(param1, param2);
    };

Inheritance

As we just mentioned, even if javascript does not provide an explicit mechanism define classes, we can implement functions to play the same role. When we need inheritance we simply copy the parent class to the prototype of the one we just created.
We use the variable p to reduce the boilerplate code. When defining members and methods for the class, we simply write p.method = function(){…} instead of TheClass.prototype.method = function…

var p = TheClass.prototype = new parentnamespace.ParentClass();

Members

We can add member variables here

p.member = 'default value';

Constructor

The constructor is a function added to the prototype, and it is invoked from the class when it is defined. We can add member variables directly in the constructor; if added in both places the value is taken from the constructor code:

p.constructor = function(param1, param2)
    {
        this.member = 'default value 2';
    }

Now that we have the class created we add it to the namespace. After that, we close the anonymous function and we must invoke it to make sure the code we just defined is executed:

namespace.TheClass = TheClass;
}());

Here is the entire code:

this.namespace = this.namespace||{};

(function() {
    "use strict";

    var TheClass = function(param1, param2) {
        this.constructor(param1, param2);
    };

    var p = TheClass.prototype = new parentnamespace.ParentClass();

    p.constructor = function(param1, param2)
    {
        this.member = 'default value 2';
    }

    namespace.TheClass = TheClass;
}());

Classes, Ecma5, Object Oriented Javascript