A guide to prototype-based class inheritance in JavaScript
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
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 prototypes is like crossing the river going from coding to computer language design. Two completely different areas of knowledge.
Technically, just the light knowledge of the 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’ve 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.
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 the Object object. That’s why its own prototype points to null. There’s nothing else above it.
Prototype-based Object Inheritance
JavaScript supports object inheritance via something known as prototypes. There is an object property called prototype attached to each object.
Working with the 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.
Some of the JavaScript built-in objects were already created following the same rules. For example Number, Array and String are inherited from Object. As we discussed earlier, this means that any property attached to Object becomes automatically available on all of its children.
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.)
