JavaScript ES6 Classes

Prototypal Inheritance

Before ES6, inheritance in JavaScript was very complicated compared to other languages:

function Vehicle(options){
  this.make = options.make
}

Vehicle.prototype.drive = function(){
  return 'vroom';
}

function Car(options){
  Vehicle.call(this, options);
  this.color = options.color;
}

Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;

Car.prototype.honk = function(){
  return 'beep';
}

const vehicle = new Vehicle({make:'Ford'});
console.log(vehicle.drive());

console.log('----------------------------');

const toyota = new Car({make:'Toyota', color:'red'});
console.log(toyota.drive());
console.log(toyota.honk());

Classes with ES6 Enhanced Object Literal Syntax

The following code produces the same result, but is much cleaner:

class Vehicle{
  constructor(options){
    this.make = options.make;
  }
  
  drive(){
    return 'vroom';
  }
  
}

const vehicle = new Vehicle({make:'Ford'});
console.log(vehicle);
console.log(vehicle.drive());

console.log('------------------------------------------------');

class Car extends Vehicle{
  constructor(options){
    super(options);
    this.color = options.color; // 'this' is undefined without call to super()
  }
  
  honk(){
    return 'beep';
  }
}

const toyota = new Car({make:'Toyota', color:'red'});
console.log(toyota);
console.log(toyota.drive());
console.log(toyota.honk());

MDN: Classes