Object-oriented Programming in JavaScript (Part 3)

Classes (ES6 and above)

In ES6 you can declare a class by using the class keyword:

// A class called 'Product'.
class Product {
  // constructor method.
  constructor (name, price) {

    // name instance property.
    this.name = name

    // price instance property.
    this.price = price
  }
}

// This variable must be assigned below the class.
let shampoo = new Product('Shampoo', 10)

You can think of the constructor as what you need to construct an object. To 'construct' a new object, use the new keyword and pass in the arguments which are the instance properties specified in the respective constructor (in this case, Product's constructor). There can only be one constructor method in a class. It is used to set up the class instance properties name and price.

Class declarations are not hoisted, so they have to be placed at the top of your code before being used. This is different from using function declarations/object constructors, which can be hoisted- placed below the code using it:

// This variable can be assigned above the function/object constructor.
let shampoo = new Product('Shampoo', 10)

// Function declaration/object constructor.
function Product (name, price) {
  this.name = name
  this.price = price
}

extends (ES6 and above)

You can use the extends keyword to create a subclass as a child of another class:

// A parent class called Product.
class Product {
  constructor (name, price) {
    this.name = name
    this.price = price
  }
}

// Food subclass.
class Food extends Product {
  cost () {
    return `${this.name} costs $${this.price}!`
  }
}

let pizza = new Food('Pizza', 10)

// Returns 'Pizza costs $10!'.
console.log(pizza.cost())

If there is a constructor in the subclass, it needs to call super before using this:

class Product {
  constructor (name, price) {
    this.name = name
    this.price = price
  }
}

class Food extends Product {
  constructor (name, price) {

    // If you omit this, there is a reference error:
    // "Must call super constructor in derived class before
    // accessing 'this' or returning from derived constructor".
    super(name, price)
  }

  cost () {
    return `${this.name} costs $${this.price}!`
  }
}

let pizza = new Food('Pizza', 10)

// Returns 'Pizza costs $10!'.
console.log(pizza.cost())

super (ES6 and above)

The super keyword can be used to call methods on parent classes of subclasses. In this case, food has an additional instance property called foodCategory.

class Product {
  constructor (name, price) {
    this.name = name
    this.price = price
  }

  // This is the method in the parent class that is accessed by the
  // Food subclass.
  cost () {
    return `${this.name} costs $${this.price}`
  }
}

// Food subclass.
class Food extends Product {

  constructor (name, price, foodCategory) {

    // If you omit this, there is a reference error:
    // "Must call super constructor in derived class before
    // accessing 'this' or returning from derived constructor".
    // name and price is needed here otherwise you get:
    // undefined costs $undefined and it is Vegetarian!
    super(name, price)

    this.foodCategory = foodCategory
  }

  info () {
    // Notice here that the cost method is from the parent class (Product).
    return `${super.cost()} and it is ${this.foodCategory}!`
  }
}

let pizza = new Food('Pizza', 10, 'Vegetarian')

// Returns 'Pizza costs $10 and it is Vegetarian!'.
console.log(pizza.info())

Below is another example. In this case, super does not have to be called in the constructor of the derived class for you to use it. This is because there is no constructor/no need for a constructor in the derived class.

// Item class.
class Item {
  constructor(name) {
    this.name = name;
  }

  itemName () {
    console.log(`This is a ${this.name}.`);
  }
}

// Tool subclass (or derived class).
class Tool extends Item {
  description () {
    super.itemName();
    console.log(`A ${this.name} is a tool.`);
  }
}

let spade = new Tool('Spade');
spade.description();

Back:

Object-oriented Programming in JavaScript (Part 2)

References: