ES2015Classes
devguides.io / ES2015

Classes

You can now write classes in ES2015. Classes let you define your own object types.

class Circle {
  constructor (radius) {
    this.radius = radius
  }
  getArea () {
    return Math.PI * 2 * this.radius
  }
}

You create instances of classes using new. These instances have functions called methods, such as getArea() here.

c = new Circle(2)
c.getArea()  12.56

Also see: Classes (MDN)

How do you define methods? Next

Methods

You can write methods similar to the object function shorthand. Note that there are no commas, unlike objects!

class Circle {
  getArea () {
    return Math.PI * this.radius * this.radius
  }  getCircumference () {     return Math.PI * 2 * this.radius   } 
}
c = new Circle(2)
c.getArea()  12.56

Also see: Methods (MDN)

What about constructors? Next

Constructors

When you have a method with the name constructor, it will be called when doing new YourClass(...).

class Circle {
  constructor (radius) {
    this.radius = radius
  }
}
c = new Circle(10.5)
c.radius  10.5

Also see: Constructors (MDN)

What about static methods? Next

Static methods

You can define functions that can be called without instanciating it (calling new YourClass). These are called static methods.

class Circle {
  static createFromDiameter (diameter) {
    return new Circle(diameter / 2)
  }
}
c = Circle.createFromDiameter(21)
Same as new Circle(10.5)

Let's learn about inheritance. Next

Inheritance

You can build on top of other classes using extends. This makes the methods of the parent class available in your class.

class Shape {
  show () {  }
  hide () {  }
}
class Circle extends Shape {
  roll () {  }
}
let c = new Circle()
c.show()
c.roll()

Also see: Sub classing (MDN)

How do I extend methods? Continue

Super

If you use the same method name in a subclass, in overrides what's in the parent class. To call methods from a class's parent, use super.

class Logger {
  log (message) {
    console.log(message)
  }
}
class ErrorLogger extends Logger {
  log (message) {
    super('Error: ' + message)
  }
}

You can also use super for static methods, but it works a little differently.

static log (message) {
  super.log('Error: ' + message)
}

Also see: super (MDN)

Are all these backward-compatible? Continue

Compatibility

Classes are simply syntactic sugar over ES5's prototypes. In fact, these two are equivalent.

class Circle {
  constructor (r) { this.radius = r }
  getDiameter () { return this.radius * 2 }
}
function Circle (r) { this.radius = r }
Circle.prototype.getDiameter = function () { return this.r * 2 }

You can both use them in the same way.

c = new Circle(20)

Let's recap what we've learned. Next

Recap

ES2015 lets you write classes instead of dealing with prototypes.

class Circle extends Shape {
  constructor (radius) {
    this.radius = radius
  }

  Methods:
  getArea () { return Math.PI * 2 * this.radius }

  Static methods:
  static createFromDiameter (d) { return new Circle(d / 2) }
}
c = new Circle(10)
c = Circle.createFromDiameter(20)
c.getArea()

Let's learn about strings. Next chapter