Explained: Prototypal Inheritance in JavaScript

What is Prototypal Inheritance? One of the favorite questions asked by interviewers.

The concept of Prototypal inheritance might seem a bit overwhelming. However, if we deep dive into the most fundamental JavaScript, Object, we may find it a lot easier. Don’t worry; there are enough pictures to keep you occupied!

The Object

Let us start with creating objects. Now open chrome DevTools, get your reading glasses and channel your inner Zuckerberg.

Ready? There are three ways of creating an object in JavaScript: Object Literals, with new keyword or using Object.create(). Type any of the following statements in your browser console and use console.log() to print the object you just created. What do you see?

let y = {};
or 
let y = Object.create({});
or
let y = new Object();
console.log(y);
// y = {
     __proto__: Object
   }

The [[Prototype]]

All the methods here create an empty object. It does not have its own properties yet, though it does have a second object associated with it. This second object is known as a prototype, and the first object “inherits” properties from this prototype. This inheritance makes all the methods of an object available to the created object. We can call the Object methods such as hasOwnProperty() or toString() to our object.

Think of this as when a baby is born. Ideally, it should have a pair of hands, legs, eyes, ears, a nose, and other parts that make it look like a human baby. So, the prototype object of this baby would be a Human.prototype. It doesn’t have its own set of memories yet, or the behavioral traits, which will be formed later depending on the environment it’s raised in. Maybe, it will be raised by a female gorilla and be the King of the Jungle? Who knows!

Anyway, now what if an object does not have a prototype?

let y = Object.create(null);

The above statement will result in an object without any properties or prototype. This created object will not inherit anything, not even basic methods of an Object. Calling the same methods as before over this new object will result in an error. You can try this on DevTools, create an object using the above method, and try calling any Object method over it to see what error you get.

So any newly created object inherits from Object.prototype. Similarly, an array that is essentially an object in JavaScript uses the Array.prototype as its prototype, which again inherits from Object.prototype. A Date object inherits from Date.prototype and Object.prototype. This linked series of prototype objects is known as a prototype chain.

Okay, let’s a recap! So far, we understood that prototypal inheritance is essentially one object inheriting a set of properties from their prototype object. To understand this further, let us take another object, O.

let protoType = {
    x: "Doe"
}
let O = {
    name: "Jane"
    __proto__: protoType
} // O inherits protoType

Note that the representation of the prototype as __proto__ has been deprecated; however, most of the existing code on the web depends on this representation; therefore, ECMAScript standard mandates it’s support for all JavaScript implementations.

Assume that you want to access a property ‘x’ in the object O. Since O does not have x in its own set of properties, O's prototype object is queried for x. If the prototype object does not have x in it’s set of properties but has a prototype itself, the query is performed on the prototype’s prototype. In this case, the query will return Doe.

This querying will continue until the property x is found or an object with a null prototype is found. However, if you want to assign a property x to the object, the assignment will change the value of x if it exists on the object O; otherwise will create a new property named x on O, hiding the possibly inherited property x.

JavaScript’s prototypal inheritance allows us to override inherited properties selectively. The inheritance occurs when querying an object and not while setting a property over the object.

To query the prototype of any project, we can use Object.getPrototypeOf().

Object.getPrototypeOf([]) // Array.prototype

We can change the prototype of an object using Object.setPrototypeOf(). But a word of caution!

let p = { x : 1 }
let q = { y : 2 }
Object.setPrototypeOf(p, q) // p now inherits the property q

There is generally no need to ever use Object.setPrototypeOf(). JavaScript implementations may make aggressive optimizations based on the assumption that the prototype of an object is fixed and unchanging. This means that if you ever call Object.setPrototypeOf(), any code that uses the altered objects may run much slower than it would normally.

— JavaScript: the Definitive Guide

One of the prototypal inheritance uses to create reusable methods that can be reused by other objects. Below, the graph object calls the addVertex method of Graph.

class Graph {
    constructor(){
      this.vertices = [];
      this.edges = [];
    }
}
Graph.prototype.addVertex = function(v) { this.vertices.push(v) }
let graph = new Graph();
graph.addVertex(10); // vertices: [10]

Congratulations. You made it till the end! ..

Prototypal inheritance is a key feature of JavaScript. If you want to learn more about JavaScript and its features, you can checkout JavaScript: the Definitive Guide. I hope you found it helpful and somewhat entertaining. I had fun writing it!

If you like what you read, be sure to like and comment if I missed anything.