Computer languages often provide a way for one object to be inherited from

another object. The inherited object contains all properties from its parent object. In addition, it will also specify its own set of unique properties.

Creating A Logical Hierarchy Of Objects

Cat and Dog are inherited from Pet which is inherited from Animal.

A Dog and a Cat share similar traits. Instead of creating two different classes,

we can simply create one class Pet and inherit Cat and Dog from it. But the Pet class itself can also be inherited from the class Animal.

Before We Start

Trying to understand prototype is like crossing the river going from coding to computer language design. Two completely different areas of knowledge.

Technically, just the light knowledge of class and extends keywords is enough to write software. Trying to understand prototype is like venturing into the darker corners of language design. And sometimes that can be insightful.

This tutorial alone won’t be enough. I only focused on some important things that hopefully will guide you in the right direction.

Under The Hood

The idea behind object inheritance is to provide structure for a hierarchy of

similar objects. You can also say a child object is ”derived” from its parent.

In the following example Crow is extended from Bird. And Bird is extended from Animal. At the top of the hierarchy is the Object object. Functions are object constructors.

How prototype chains are created in JavaScript.

Technically, this is what it looks like. Try not to think too much into this. Just know that at the very top of hierarchy there is Object object. There is nothing else above. That’s why it’s own prototype points to null.

Prototype-based Object Inheritance

JavaScript supports object inheritance via something known as prototype. There is an object property called prototype attached to each object.

Working with class and extends keywords is easy - but actually understanding how prototype-based inheritance works is not trivial. Hopefully this tutorial will lift at least some of the fog!

Object Constructor Functions

Functions can be used as object constructors. The name of a constructor function usually starts with an uppercase letter to draw the distinction between regular functions.

Object constructors are used to create an instance of an object. You can use built-in constructors (Number, Array, String, etc.) or create your own. You can even extend new objects from all existing types.

Some of the JavaScript built-in objects were already created following the same rules. For example Number, Array and String are inherited from Object too. As we discussed earlier, this means that any property attached to Object’s prototype property becomes automatically available on all of its children. That’s the basic idea behind prototype inheritance.



Constructors

It’s impossible to understand prototype without understanding the anatomy of constructor functions.

So, what exactly happens when we create a custom constructor function? Two properties magically appear in our class definition: constructor and prototype.constructor.

They do not point to the same object. Let’s break them down:

Let’s say we define a new class Crane (using either function or class keyword.)