Classes - ES5 vs ES6

README.md

JavaScript Classes - ES5 vs ES6

An example that shows the difference between creating a JavaScript class and subclass in ES5 and ES6.

es5.js

'use strict'

/**
 * Shape class.
 * 
 * @constructor
 * @param {String} id - The id.
 * @param {Number} x  - The x coordinate.
 * @param {Number} y  - The y coordinate.
 */
function Shape (id, x, y) {
  this.id = id
  this.setLocation(x, y)
}

/**
 * Set shape location.
 *
 * @param {Number} - The x coordinate.
 * @param {Number} - The y coordinate.
 */
Shape.prototype.setLocation = function (x, y) {
  this.x = x
  this.y = y
}

/**
 * Get shape location.
 *
 * @return {Object}
 */
Shape.prototype.getLocation = function () {
  return {
    x: this.x,
    y: this.y
  }
}

/**
 * Get shape description.
 *
 * @return {String}
 */
Shape.prototype.toString = function () {
  return 'Shape("' + this.id + '")'
}

/**
 * Circle class.
 *
 * @constructor
 * @param {String} id     - The id.
 * @param {Number} x      - The x coordinate.
 * @param {Number} y      - The y coordinate.
 * @param {Number} radius - The radius.
 */
function Circle (id, x, y, radius) {
  Shape.call(this, id, x, y)
  this.radius = radius
}

Circle.prototype = Object.create(Shape.prototype)
Circle.prototype.constructor = Circle

/**
 * Get circle description.
 *
 * @return {String}
 */
Circle.prototype.toString = function () {
  return 'Circle > ' + Shape.prototype.toString.call(this)
}

// test the classes
var myCircle = new Circle('mycircleid', 100, 200, 50) // create new instance
console.log(myCircle.toString()) // Circle > Shape("mycircleid")
console.log(myCircle.getLocation()) // { x: 100, y: 200 }

es6.js

'use strict'

/**
 * Shape class.
 * 
 * @constructor
 * @param {String} id - The id.
 * @param {Number} x  - The x coordinate.
 * @param {Number} y  - The y coordinate.
 */
class Shape {
  constructor (id, x, y) { // constructor syntactic sugar
    this.id = id
    this.setLocation(x, y)
  }

  /**
   * Set shape location.
   *
   * @param {Number} - The x coordinate.
   * @param {Number} - The y coordinate.
   */
  setLocation (x, y) { // prototype function
    this.x = x
    this.y = y
  }

  /**
   * Get shape location.
   *
   * @return {Object}
   */
  getLocation () {
    return {
      x: this.x,
      y: this.y
    }
  }

  /**
   * Get shape description.
   *
   * @return {String}
   */
  toString () {
    return `Shape("${this.id}")`
  }
}

/**
 * Circle class.
 *
 * @constructor
 * @param {String} id     - The id.
 * @param {Number} x      - The x coordinate.
 * @param {Number} y      - The y coordinate.
 * @param {Number} radius - The radius.
 */
class Circle extends Shape {
  constructor (id, x, y, radius) {
    super(id, x, y) // call Shape's constructor via super
    this.radius = radius
  }

  /**
   * Get circle description.
   *
   * @return {String}
   */
  toString () { // override Shape's toString
    return `Circle > ${super.toString()}` // call `super` instead of `this` to access parent
  }
}

// test the classes
var myCircle = new Circle('mycircleid', 100, 200, 50) // create new instance
console.log(myCircle.toString()) // Circle > Shape("mycircleid")
console.log(myCircle.getLocation()) // { x: 100, y: 200 }