Object-Oriented JavaScript — Class Inheritance

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at JavaScript subclasses, mixins, and multiple inheritance.

Subclassing

We can create subclasses from a JavaScript class.

For instance, we can write:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} speaks`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} woofs`);
  }
}

const mary = new Dog('mary');

to create the Animal class.

The speak method is in the Animal class.

We created a subclass of Animal called Dog which also has the speak method.

If we create a Dog instance, then the speak method in Dog will be used.

So if we write:

mary.speak();

We see:

mary woofs

There are several ways to access the superclass of a class.

We can call super() to call the superclass and pass in the arguments of the parent constructor.

Also, we can call super.<parentClassMethod> to call a parent class’s method.

super.<parentClassProp> lets us access the parent class properties.

So if we have:

class Parent {}

class Child extends Parent {
  constructor(name) {
    this.name = name;
  }
}

const child = new Child('james')

We’ll get the error:

Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

this is because we need to call super first to invoke the parent constructor before we can set the properties of this .

This can be done implicitly if we omit the constructor in Child .

If we have:

class Parent {}

class Child extends Parent {}

const child = new Child()

Then we won’t get an error since a default constructor is provided.

The default is:

constructor(...args) {
  super(...args);
}

Mixins

JavaScript only supports single inheritance, so we can’t use the standard JavaScript syntax to inherit properties from multiple classes.

Instead, we have to compose multiple classes into one with functions.

We can write:

class Person {}

const BackgroundCheck = Tools => class extends Tools {
  check() {}
};

const Onboard = Tools => class extends Tools {
  createEmail() {}
};

class Employee extends BackgroundCheck(Onboard(Person)) {}

We have the BackgroundCheck class that returns a subclass of the Tools class.

So Person is Tools in the Onboard function,.

And Onboard(Person) is Tools in the BackgroundCheck function.

This way, we return a class that has both the check and createEmail methods and we can use the resulting class to create the Employee subclass.

Conclusion

We can create subclasses with the extends keyword.

Also, we can create functions that returns a class and compose them so that we can inherit from multiple classes.