DEV Community

loading...

Inheritance in JavaScript - Part 3 of 3

Mario
Software Engineer from Vienna, Austria. Building things, mainly in JavaScript.
Originally published at mariokandut.com on ・4 min read

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:

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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');
};
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)