DEV Community


Posted on • Updated on

Classical vs. Prototypal Inheritance

Stay hydrated out there

Shoe Class Example

Object Orientation

Objects are abstractions (or described representations) of physical things with which we interact in the real world. Some real-world things are much more alike than others. A boot, for example, has much more in common with a slipper than it does with a tree. It wouldn't be out of the ordinary to refer to either as a Shoe. Without hardly knowing it, we make these mental organizations all the time.

The purpose of Object-Oriented Programming is to mimic these real-world categories as closely as possible. As important as it is to recognize the similarities between objects, we must also realize their differences. Let's take our Shoe example a step farther.

Let's discuss what properties and behaviors shoes have in common: a size, a color, and a material. We can change a shoe's color or a shoe can wear down.

Shoe Class Example

Just as we do in reality we can categorize all Shoes by what they have in common, and create an endless amount of individual Shoe copies that inherit all the characteristics that all shoes have, but with their own unique characteristics as well.

In this case Shoe is known as a Generalization; in other words the more general, less specific description of a real-world item.

Shoe Class Example

Classical Inheritance

In Classical Inheritance, Objects are still abstractions of real world 'things', but we can only refer to Objects through Classes. Classes are a Generalization of an object. In other words, Classes are an abstraction of an object of a real world thing. (Classes, then, are an abstraction of an abstraction of a real-world thing). Since a Class is yet another reference to (or abstraction of) its predecessor, each descendant child Class increases the level of abstraction, thus increasing the level of generalization.

Shoe Class Example

Prototypal Inheritance

As opposed to Classical Inheritance, Prototypal Inheritance does not deal with increasing layers of abstraction. An Object is either an abstraction of a real-world thing, same as before, or is a direct copy of another Object (in other words, a Prototype). Objects can be created from thin air, or they can be created from other objects:

Shoe Class Example

This is important! It means that Generalizations (like the overarching Shoe concept) are just other Objects. With Classical Inheritance, Generalizations are abstractions of abstractions of abstractions... all the way down to the most recent descendant.

The abstraction level here is never deeper than 1; The only abstraction that occurs with Prototypal Inheritance is the abstraction away from real-world things.

Prototypal Inheritance includes some key advantages over Classical Inheritance:

Shoe Class Example

The Mechanics of Prototypal Inheritance

The Constructor

In JavaScript, all Objects have a Constructor. And in JavaScript classes, we use the Constructor function to create and instantiate new Objects within a class. Each class can only have one constructor. In the example above, we instantiate each Shoe Object with characteristics that all Shoe Objects share (all Shoes have a size, color, and material).

You can take a more in-depth look into Constructors (how to view an Object's class, how to change a class, etc.) on MDN.

New Operator

According to MDN docs the New operator performs the following actions:

  1. Creates a blank, plain JavaScript object;
  2. Links (sets the constructor of) this object to another object;
  3. Passes the newly created object from Step 1 as the this context;
  4. Returns this if the function doesn't return its own object.

In order to instantiate a Prototype of a JS class, we use the keyword new. In the example above, we define the name of the new Object let slipper and create it with new. We then pass in the parameters defined in the constructor of the Shoe class. These new Object instantiations are known as types. You can then access any of the Object properties by calling, for example, slipper.size or slipper.color.

Shoe Class Example


The differences between Classical and Prototypical Inheritance can get pretty complex quickly. If you wish to study these concepts on a much deeper level, you might try "Why Prototypical Inheritance Matters" by Aadit M Shah.

Stay hydrated out there

I hope this was helpful

But you know what else is helpful... A shiny new mechanical keyboard.
Click that if you're interested in a good one.

Or click this for another cool option.

Or perhaps you have a good one and you want to spruce it up a bit (you know I did).

Top comments (2)

xyeres profile image
Michael Carr

I would also suggest checking out Kyle Simpsons take on this topic, he's a master at making js prototypal inheritance a little more understandable

tobiasramzy profile image

This was a great read! Thank you, the differences between prototype-based inheritance and class-based weren't so clear at first, but this helped me understand it.