Inheritance in JavaScript - Part 3 of 3
Tags: javascript, node, computerscience
Published: 2021-05-25 12:45:59

---
title: Inheritance in JavaScript - Part 3 of 3
published: true
date: 2021-03-08 00:00:00 UTC
tags: javascript, node, computerscience
canonical_url: https://www.mariokandut.com/prototypal-inheritance-in-javascript-with-class-syntax-functions/
---

This is the third article in a series about prototypal inheritance in JavaScript. Have a look at the first article about [Inheritance in JavaScript](https://www.mariokandut.com/inheritance-in-javascript-and-the-prototype-chain-explained/).

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

- [functional](https://www.mariokandut.com/inheritance-in-javascript-and-the-prototype-chain-explained/)
- [constructor functions](https://www.mariokandut.com/prototypal-inheritance-in-javascript-with-constructor-functions/)
- class-syntax constructors (this article)

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

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#prototypal-inheritance-class-syntax-constructors)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.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#tldr)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](https://www.twitter.com/mariokandut)**.

If you want to know more about **Javascript** , have a look at these [Javascript Tutorials](https://www.mariokandut.com/tags/javascript).

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#references-and-big-thanks)References (and Big thanks)

[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain), [JSNAD](https://trainingportal.linuxfoundation.org/)