Inheritance and Prototypes in JavaScript

Things I didn’t realize existed in JavaScript

In java every class inherits from a class called Object. This Object class has methods like toString() and equals() that other classes can use by default. That means, without defining such methods in themselves. Hence an object of class can invoke the toString() function. And this is a piece of common knowledge for OOP programmers with traditional OOP language backgrounds, like Java. Nothing new here.

Similarly, JavaScript objects have methods like toString(). But wait. There is no inheritance in JavaScript. Right?

Technically, yes, there is no inheritance like we know it in OOP. JavaScript classes don’t extend or implement other classes and such. But let’s see something interesting. Here, let’s create an empty object, and try to invoke a toStrin method.

let obj = {};

Yes. This code, above here, will work smoothly. It will print [object Object], indicating that it is an object instance of Object. Now the question is if there is no inheritance in JavaScript, where did this method come from?

Where does a JavaScript object get the method toString()?

JavaScript might not have inheritance in the traditional sense of OOP, but every object in JavaScript has a prototype. Which is similar to inheritance but not exactly the same.

So what is Prototype in JavaScript and why is it not inheritance?

In a way, prototypes provide the capability of inheritance to object in JavaScript. For me, prototypes in JS are like classes in Java. They are the blueprint on which objects are created based on. And we can specifically provide a prototype when we create our classes, saying make my object based on this class. If not, our object is directly shaped from the Object.prototype, which is the default prototype. Similarly, when we create a function, it takes the shape of Funciton.prototype.

JavaScript prototypes are objects which are used as a fallback mechanism by JavaScript. When an object tries to access a property, it will first look it up on itself. Then it will look up in the prototype. Then prototype’s prototype. The chain goes on.

Just like inheritance, prototypes help us avoid repeating ourselves and organize our code in a neat way.

Specifying our own prototype when creating an object.

Besides creating an object using string literals, as we did above, we can also use Object.create method to create objects. One benefit of using this method is, we can provide a prototype of our own. Which is like putting an ancestor in between our new object and Object.

Here is how to do it.

const person {
  fullName = "Alula Kibrom",
  city = "Addis Ababa"
const employee = Object.create(person);


Here, we are making the employee object to take the format of the person object. So, just like inheritance, it gets the two properties fullName and city from person object with the same value. So we need to overwrite that value. Also, it inherits methods like toString from Object.

Can we create a JavaScript object without any Prototype?

As we saw above, every object will have the Prototype.Object as the default prototype and it will have the methods and attributes from it. If we want to create an object without this object as a prototype, there is a way.

To create an object without any prototype pass null as the argument for the Object.create method.

const orphan = Object.create(null);

Now, the object orphan doesn’t have any property or method by default.

Summing up Inheritance and Prototypes in JavaScript

JavaScript might not have the typical traditional OOP ways of inheritance. But it accomplishes the same concept using Prototypes.

We can create objects based on other objects, without the involvement of classes. Also, all js objects are prototyped from Object.

Your subscription could not be saved. Please try again.
Your subscription has been successful.

Learn Modern JS, CSS, & PHP

Subscribe to learn modern PHP in the most simple way.