ECMAScript 6 Classes

At the time of this writing in mid 2014, ECMAScript 6 — which practically in people’s minds means “the next version of JavaScript” — has not been officially released yet and support for its features is inconsistent across different environments. This comes as no surprise as things are still in the works. However, a lot of the features that will be available to developers when the upcoming version finally is released already have a lot of discussion surrounding them. One of these is that there is finally *finally* going to be an implementation of classes introduced into the JavaScript language.

It’s hard not to get excited about the notion of true classes in JavaScript, especially because of what it means for inheritance. We have looked at inheritance in JavaScript previously and how you can kind of mimic class-like behavior by using function objects as constructors and setting the prototypes of inheriting objects to instances of parent objects. However, with classes we will (hopefully), no longer have to worry about this.

Picking up the commonly-used-in-other-languages example of inheritance using animals, let’s see how things might look in ECMAScript 6…

class Animal {

    constructor(){
        this.color = 'brown';
        this.size = 'medium';
        this.age = 1;
    }

    sound() {
        console.log('Grunt');
    }
    move() {
        console.log('Running');
    }
}

class Dog extends Animal {    
    constructor(color, size, age) {
        this.color = color;
        this.size = size;
        this.age = age;
    }

    sound() {
        console.log('Woof');
    }
}

var d = new Dog('Black', 'medium', 5);
console.log(d.size); // medium
d.sound(); // Woof
d.move(); // Running

So as we can see, the inheriting object will inherit items it does not specifically set for itself from the animal object. We can even take this a step further and inherit from Dog. If our constructor formed similarly compares to the object we are inheriting from, we can use the “super” keyword…

class Pomeranian extends Dog{    
    constructor(color, size, age) {
        super(color, size, age)
    }

    sound() {
        console.log('Yap');
    }
}

var p = new Pomeranian('Brown', 'small', 5);
p.sound(); // Yap
p.move(); // Running

How sweet is that? With support for classes it appears that ECMAScript 6 is going to bring about much better implementations of inheritance that follow a more recognizable classical pattern like those seen in Java, PHP, and other languages. It’s something that those who program in JavaScript have been wanting for quite some time.

As mentioned earlier, current support for ECMAScript 6 varies across different environments. One place that you can experiment with some of the new features is this ES6 Fiddle. Classes are just one of the new features on the horizon, but there are other snippets of example code showcasing what else is new in ECMAScript 6 that you can explore,