A practical introduction to ES2015 classes

At the moment, not all of these features are available in all environments, but we’re not here to talk about feature support. Instead, we’re making the assumption that they are available in your environment or you’re using a tool like Babel to transform your JavaScript.

Classes, in ES2015, provide constructors, static and instance methods, inheritance, and the ability to extend a class by another class.

Best of all, you don’t have to call classes “functions” anymore.

Syntax

Defining a class

Defining a class involves the class keyword followed by the name for the class (typically in PascalCase).

class Person {};
var me = new Person;

Boom.

constructor

The optional constructor method allows you to perform actions when an instance of a class is instantiated although you probably just want to take this opportunity to define properties.

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}
var me = new Person('Flip', 'Stewart');

extend & super

extend allows you to create a sub class!

When creating a sub class, you call super with the necessary parameters for the base class. Any additional properties must be defined after that super call.

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}
class PetOwner extends Person {
  constructor(firstName, lastName, pets) {
    super(firstName, lastName);
    this.pets = pets;
  }
}
var me = new PetOwner('Flip', 'Stewart', ['Zemo']);

More on super

Methods from base classes are available on super within their corresponding sub classes.

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  getFullName() {
    retu\r\n \this.firstName + ' ' + this.lastName;
  }
}
class User extends Person {
  constructor(firstName, lastName) {
    super(firstName, lastName);
    this.fullName = super.getFullName();
  }
}
var me = new User('Flip', 'Stewart');
me.fullName
// "Flip Stewart"

static

static methods may only be called on the class itself as opposed to on its instantiated instances.

Static methods on a base class may be called on super from within a subclass.

class Cat {
  static getGreeting() {
    return 'meow';
  }
}
class LoudCat extends Cat {
  static getGreeting() {
    return super.getGreeting().toUpperCase();
  }
}
Cat.getGreeting();
// "meow"
LoudCat.getGreeting();
// "MEOW"
var zemo = new LoudCat();
zemo.getGreeting();
// Uncaught TypeError: zemo.getGreeting is not a function

Getters and setters

Getters and setters work!

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  get fullName() {
    return (this.formattedPrefix ? this.formattedPrefix: '') + this.firstName + ' ' + this.lastName;
  }
  set prefix(string) {
    this.formattedPrefix = string + ' ';
  }
}
var me = new Person('Flip', 'Stewart');
me.prefix = 'Super Dr.';
me.fullName
// "Super Dr. Flip Stewart"

Hopefully this gives you a running start with ES2015 classes!