07/06/2019 A Guide To Prototype-Based Class Inheritance In JavaScript

A Guide To Prototype-Based Class

Inheritance In JavaScript
JavaScript Teacher Follow
Feb 8 · 8 min read

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

[Link] 1/11
07/06/2019 A Guide To Prototype-Based Class Inheritance In JavaScript

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.

[Link] 2/11
07/06/2019 A Guide To Prototype-Based Class Inheritance In JavaScript

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 [Link].

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

A custom constructor we just created is now attached to the prototype

property of our custom Crane class. It’s a link that points to its own
constructor. It creates circular logic. But that’s only one piece of the
puzzle.

Let’s now take a look at [Link]:

[Link] 3/11
07/06/2019 A Guide To Prototype-Based Class Inheritance In JavaScript

[Link] itself points to the type of the object it was created

from.
Because all object constructors are natively functions, the object
[Link] points to is an object of type Function, in other
words the function constructor. (In JavaScript functions can be used as
object constructors but they are also objects at the same time, once
instantiated.)

This dynamic between [Link] and

[Link] is what enables prototype inheritance at molecular
level. You rarely even have to think about this when writing JavaScript
code. But this is definitely an interview question.

Let’s briefly go over this again. [Link] points to

its own constructor. It’s almost like saying ”I am me.”

Same exact thing happens when you define a class using class keyword:

But, the [Link] property points to Function constructor.

[Link] 4/11
07/06/2019 A Guide To Prototype-Based Class Inheritance In JavaScript

And that’s how the link is established.

Now Crane object itself can be the ”prototype” of another object. And
that object can be prototype of another object. And so on. The chain
can go on forever.

Side Note: In the case of the ES5-style functions, the function itself is
the
constructor. But ES6 class keyword places constructor inside of its
scope. This
is just a syntactic difference.

Prototype-Based Inheritance
We should always use class and extends keywords to create and inherit
objects. But they are only candy wrapper for what actually goes on
behind the scenes.

Even though creating object inheritance hierarchies using ES5-style

syntax is long outdated and rarely seen among professional software
developers, by understanding it you will gain a deeper insight into how
it actually works.

Let’s define a new object Bird and add 3 properties: type, color and
eggs. Let’s also add 3 methods: fly, walk and lay_egg. Something all
birds can do:

[Link] 5/11
07/06/2019 A Guide To Prototype-Based Class Inheritance In JavaScript

Note that I intentionally grayed out the lay_egg method. Remember

how we
discussed earlier that [Link] points to its own constructor?

You could have alternatively attached the lay egg method directly to
[Link] as shown in the next example:

At first sight it may sound like there is no difference between attaching

methods using this keyword inside Bird and simply adding it directly to
the [Link] property. Because it still works right?

But this is not entirely true. I won’t go into the details as of just yet,
because I don’t fully understand the distinction here. But I plan on
updating this tutorial when I gather up some more insight on the
subject.

(comments from prototype veterans are welcome!)

Not All Birds Are Made Alike

The whole point of object inheritance is to use one common class that
defines all properties and methods that all children of that class will
automatically inherit. This makes code shorter and saves memory.

(Imagine de ning the same properties and methods on all of the children
objects individually all over again. It would take twice as much memory.)

[Link] 6/11
07/06/2019 A Guide To Prototype-Based Class Inheritance In JavaScript

Let’s create several different types of birds. Even though all of them can
still fly, walk and lay_eggs (because they are inherited from main Bird
class,) each unique bird type will add its own methods unique to that
class. For example, only parrots can talk. And only raven can solve
puzzles. Only a songbird can sing.

Parrot
Let’s create a Parrot and inherit it from Bird:

Parrot is a regular constructor function just like Bird.

The difference is that we call Bird’s constructor with [Link] and pass
the Parrot’s this context, before attaching our own methods. [Link]
simply adds all of its properties and methods to Parrot. In addition to
that, we are also adding our own method: talk.

Now parrot can fly, walk, lay eggs and talk! But we never had to
define fly walk and lay_eggs methods inside Parrot itself.

Raven
In the same way, let’s create Raven and inherit it from Bird:

Ravens are unique in that they can solve puzzle.

Songbird
Now, let’s create Songbird and inherit it from Bird:

[Link] 7/11
07/06/2019 A Guide To Prototype-Based Class Inheritance In JavaScript

Songbirds can sing.

Testing The Birds

We just created a bunch of different birds with unique abilities. Let’s see
what
they’re capable of! Up until now we only defined classes and
established their
hierarchical relationship.

In order to work with objects we need to instantiate them:

Let’s instantiate a sparrow using the original Bird constructor:

Sparrow can fly, walk and lay eggs, because it was inherited from Bird
that defines all those methods.

But a sparrow cannot talk. Because it is not a Parrot.

Let’s create a parakeet from Parrot class:

Because Parrot is inherited from Bird, we get all of its methods. A

parakeet has the unique ability to talk, but it cannot sing! The sing
method is available only on objects of type Songbird. Let’s inherit
starling from Songbird class:

Finally, let’s create a raven and solve some puzzles:

Using class and extends keywords

The ES5-style constructors can be a bit cumbersome.

[Link] 8/11
07/06/2019 A Guide To Prototype-Based Class Inheritance In JavaScript

Luckily we now have class and extends keywords to accomplish

exactly the same thing we just did in the previous section.

class replaces function

extends and super() replace [Link] from previous examples.

Note we must use super() which calls the constructor of the parent
class.

This syntax looks a lot more manageable!

Now all we have to do is instantiate the object:

Overview
Class inheritance helps establish a hierarchy of objects.

Classes are the fundamental building blocks of your application design

and architecture. They make working with code a bit more human.

Of course, Bird was just an example. In a real-world scenario, it could

be anything based on what type of application you’re trying to build.

Vehicle class can be a parent of Motorcycle, Car, or Tank.

Fish can be used to inherit Shark, Goldfish, Pike and so on.

[Link] 9/11
07/06/2019 A Guide To Prototype-Based Class Inheritance In JavaScript

Inheritance helps us write cleaner code and re-purpose the parent

object to save memory on repeating object property and method
definitions.

Email

Sign up

I agree to leave [Link] and submit this

information which will be collected and used

[Link] 10/11