Abstract Classes with Static Methods in ES2015

2016-01-19 14:42:17 -0500

ES2105 classes have much better support for static method patterns than traditional ways of doing it in ES5.

In ES2015, there are actually two prototype chains in classes: one for instance methods and one for static methods. This means you can use super and this in a static method, and it works as expected.

This makes using an abstract class pattern much easier. Here's an example:

'use strict';

class AbstractShape {
  static get SHAPE_NAME() {
    throw new Error(
      'must specify a SHAPE_NAME in your subclass of ' +
      'AbstractShape'
    );
  }

  static get englishName() {
    return this.SHAPE_NAME['en-US'];
  }

  static get spanishName() {
    return this.SHAPE_NAME['en-MX'];
  }
}

class Square extends AbstractShape {
  static get SHAPE_NAME() {
    return {
      'en-US': 'square',
      'es-MX': 'cuadrado'
    }
  }
}

console.log(Square.englishName); // -> 'square'
console.log(Square.spanishName); // -> 'cuadrado'
console.log(AbstractShape.englishName); // Throws an Error

A few things that are interesting with ES2015 static methods:

  • You can't have static properties, but you can make static getters to get the same effect (with some syntactic noise).
  • In a static method, this refers to the class itself. Effectively, you can just access other static methods with this.
  • You cannot refer to the class itself in the class body. This is not legal:
static get englishName() { return AbstractShape.SHAPE_NAME['en-US']; }

I'm guessing is the reason for this is that classes are not hoisted in ES2015.

More class posts coming soon!