Inheritance in JavaScript
Tags: javascript
Published: 2021-05-23 23:22:59

---
title: Inheritance in JavaScript
published: true
date: 2021-03-06 00:00:00 UTC
tags: javascript
canonical_url: https://www.mariokandut.com/inheritance-in-javascript-and-the-prototype-chain-explained/
---

Compared to class-based languages like Java, C# or C++, JavaScript is a bit different. JavaScript is dynamic and doesn't provide a class implementation. Though, there is the class keyword, which was introduced in ES2015, but its just **syntactical sugar**. JavaScript remains **prototype-based**.

## [<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>](#the-prototype-chain)The prototype chain

When it comes to inheritance, JavaScript only has one construct: **objects**. Each object has a **private property** which holds a **link to** another object called its **prototype**. That object also has a prototype on its own, and that object also and the next one and so on, until an object is reached with **NULL** as its prototype. By definition, **null has no prototype** , so it is the final link in this prototype chain.

As we can see now the prototype chain, **inheritance in JavaScript is achieved with a chain of prototypes.** There are different approaches on creating prototype chains. They have evolved over time as the languages updates and new features and syntax are added. Nearly all objects in JavaScript are instances of Object which sits on the top of a prototype chain.

The prototypal inheritance model itself is more powerful than the classic model. For example, it is fairly simple to build a classic model on top of a prototypal model.

There are three common ways to create a prototype chain:

- functional
- constructor functions
- class-syntax constructors

This article will cover the functional 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-functional)Prototypal Inheritance (Functional)

The functional approach to creating prototype chains is to use `Object.create`. Let's have a look at an example. For the example code, we will use the `animal` and `dog` taxonomy, where animal is a prototype of dog.

```
const animal = {
  eat: function() {
    console.log(this.name + ' eats');
  },
};

const dog = Object.create(animal, {
  bark: {
    value: function() {
      console.log(this.name + ' woofs');
    },
  },
});

const henry = Object.create(dog, {
  name: { value: 'Henry' },
});

henry.bark();
henry.eat();
```

The animal is a plain JavaScript object, created with the object literal syntax, and the prototype is Object.prototype, as for every plain JavaScript object. The `Object.create` function takes two arguments. First one is the desired prototype of the object being created, and the second one is the properties you want to add or the `Properties Descriptor Object`, it's optional.

So, when dog is instantiated, the first argument is the animal object. So animal is the prototype of dog. When henry is instantiated the first argument is dog passed to `Object.create` is dog. So the full prototype chain ist:

- the prototype of henry is dog
- the prototype of dog is animal
- the prototype of animal is Object.prototype.

The Property Descriptor is a JavaScript object that describes the characteristics of the properties on another object, and contains keys that will become the key name on the object being created.

The values of these keys are called Property Descriptor objects. The method `Object.getOwnPropertyDescriptor` can be used to get a property descriptor on any object. To describe the value of a property, the descriptor can either use value or get and set to create a property getter/setter. The other properties are associated meta-data for the property. There is a writable property that determines whether the property can be reassigned, and a enumerable property, which determines whether the property will be enumerated in property iterator abstractions (like Object.keys). The configurable property sets whether the property descriptor itself can be altered. The default for all of these meta-data keys is false. Read more about property descriptors at [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#description).

In the case of dog and henry the property descriptor only sets value, which adds a non-enumerable, non-writable, non-configurable property.

The **JavaScript runtime performs** the following steps when `henry.eat` is called.

- Check if henry has a eat property; (NO)
- Check if the prototype of henry, which is dog, has a eat property (NO)
- Check if the prototype of dog, which is animal, has a eat property (YES)
- Execute the eat function setting this to henry, so this.name will be 'Henry'.

## [<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)

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/)