The Startup
Published in

The Startup

Prototypical Inheritance in Javascript

Photo by Bharat Patil on Unsplash

In Javascript we don’t have classes, rather we only have objects. So if we want to implement inheritance with objects we can get the help of prototypical inheritance.

Before talking about prototypical inheritance, we all should stay on the same pitch in terms of javascript prototype. So,

Prototype in Javascript

Suppose we have one object john . We have another object person .

john is a type of person , right?

We will add the common behaviors to the person object, then later somehow we will link this person object with the john object. Now we can refer person as the prototype of john object.

Prototype is just a parent of another object.

Every object in javascript (except a single one) has a prototype object. Now the question is how this prototype looks like?

We can get the help of the Chrome dev tool to see how a prototype looks like.

In the above screenshot, we can see the prototype of person object inside __proto__ property. Yes, this is the prototype of person object.

Every object in Javascript has a constructor property that refers to the function that was used to create that object.

A prototype is just an object in memory. Every object has a prototype or parent except one object. We will refer to that object throughout the article as the base object.

So every object in javascript is derived from another object which we can refer to as base Object. So the base object is the root of all objects in Javascript. On the above screenshot, you can see that there is no __proto__ property inside the prototype of person

So Base Object doesn't have any prototype. It is the root.

We always have a single reference of the base object in memory and all objects we will create later directly or indirectly derived from the base object.

To see this in action we can get the help of getPrototypeOf method.

Object.getPrototypeOf(person) === Object.getPrototypeOf({})

This expression will always return true.

We should not use __proto__ property directly from any object because its deprecated rather we should always use getPrototypeOf method.

Now time to see the prototypical inheritance in action.

Prototypical Inheritance in Javascript

In person object we had some methods like toString and valueOf but we did not define those methods in person. Then how we are getting those properties and methods? 🤔

When we access a property or method in an object, the javascript engine first looks for that property on the object itself. If it can't find then it looks inside its prototype.

If the property is not defined inside its prototype then the engine looks if the prototype is inherited from another prototype. (Multilevel prototypical inheritance, will talk about it later)

This way it will look all the way up to the base object. This is the prototypical inheritance in action.

Multilevel Prototypical Inheritance in Javascript

Before talk something about the multilevel prototype first we will create an array an inspect its prototype to see what is inside there.

Create an empty array users in the Chrome Dev Tool and inspect what’s inside that array.

In the prototype of users you will see a lot of methods and if you are working with javascript for some time, probably you already used a lot of these methods. Those are array helper methods and most of them got introduced in ES6.

Those methods are inside the __proto__ property so the object inside the __proto__ property is the prototype of an array. You can also get that using the following statement.

Object.getPrototypeOf(users)

If you go to the very end of users prototype members, you will see another__proto__ property. Try to inspect that __proto__ property.

We are familiar with this last prototype object, right? It’s the base object.

So we can visually represent the whole thing like bellow.

So the users has a prototype that we can call as array prototype. In that array prototype, we have all the helper methods of the javascript array.

That array prototype is inherited from another prototype, which is the root prototype or the base of all javascript objects. This is the multi-level inheritance in action.

This is the first part of my writing about prototypical inheritance. Here I am covering the basic things like what is javascript prototypes, prototypical inheritance, and multi-level prototypical inheritance.

In the second part, I will write about implementing custom and your own multi-level prototypical inheritance that you can use to write reusable and more robust application code. So stay tuned!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ashraful Islam

Ashraful Islam

54 Followers

Software Engineer | Javascript Developer | React | React Native | Angular | NodeJS