Inheritance in JavaScript - Part 3 of 3

This is the third article in a series about prototypal inheritance in JavaScript. Have a look at the first article about Inheritance in JavaScript.

The prototype chain is the way inheritance in JavaScript is achieved. There are three common ways to create a prototype chain:

• functional
• constructor functions
• class-syntax constructors (this article)

💰 The Pragmatic Programmer: journey to mastery. 💰 One of the best books in software development, sold over 200,000 times.

This article will cover the class-syntax approach on creating prototype chains.

Prototypal Inheritance (Class-Syntax Constructors)

JavaScript got a class keyword with ECMAScript2015 or ES6. This is not the same as a class keyword in a classical OOP language, JavaScript remains dynamic and loosely typed.

The class keyword is syntactic sugar that actually creates a function, it creates a Constructor Function. Don't believe me? 😀 Let's log the typeof of a class.

class test {}
console.log(typeof test);

// The result will be function

The class syntax does significantly reduce boilerplate when creating a prototype chain.

Let's have a look at some code. For the example code, we will use the animal and dog taxonomy, where animal is a prototype of dog.

class Animal {
  constructor(name) {
    this.name = name;
  }
  eat() {
    console.log(this.name + ' eats');
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name + ' the dog');
  }
  bark() {
    console.log(this.name + ' barks');
  }
}

const henry = new Dog('Henry');

henry.eat(); // prints "Henry the dog eats"
henry.bark(); // prints "Hentry the dog barks"

The code above results in the exact prototype chain as in the functional approach or constructor approach.

console.log(Object.getPrototypeOf(henry) === Dog.prototype); //Will be true
console.log(
  Object.getPrototypeOf(Dog.prototype) === Animal.prototype,
); //Will be true

To describe the full prototype chain:

• the prototype of Henry is Dog.prototype
• the prototype of Dog.prototype is Animal.prototype
• the prototype of Animal.prototype is Object.prototype.

The extends keyword makes prototypal inheritance a lot simpler. In the example code, class Dog extends Animal will ensure that the prototype of Dog.prototype will be Animal.prototype. The constructor method in each class is the equivalent to the function body of a Constructor Function. The super keyword in the Dog class constructor method is a generic way to call the parent class constructor, while setting the this keyword to the current instance ( Animal.call(this, name + ' the dog') is equivalent to super(name + ' the dog') ). Any methods other than the constructor, are added to the prototype object of the function that the class syntax creates.

Let's remove the syntactic sugar.

class Animal {
  constructor(name) {
    this.name = name;
  }
  eat() {
    console.log(this.name + ' eats');
  }
}

// remove syntactic sugar

function Animal(name) {
  this.name = name;
}

Animal.prototype.eat = function() {
  console.log(this.name + ' eats');
};

The class-syntax is the preferred way to create a prototype chain in JavaScript at the time of writing this article.

TL;DR

• Inheritance in JavaScript is achieved with a chain of prototypes
• There are three common ways to create a prototype chain (functional, constructor functions, class-syntax constructors)
• The class-syntax is syntactic sugar and creates a constructor function.
• The class-syntax reduces boilerplate code and is the preferred way of creating prototype chains.

Thanks for reading and if you have any questions, use the comment function or send me a message @mariokandut.

If you want to know more about Javascript, have a look at these Javascript Tutorials.

References (and Big thanks)

MDN, JSNAD