Prototypal inheritance in Javascript

2 min readJan 9, 2019

In programming we often want to take something and extend it.Inheritance in javascript is long discussed feature as we know javascript was lacking behind fully featured object oriented Programming Patterns.

However javascript gives as many powerful object oriented programming patterns, prototype inheritance is one of them.

What is PROTOTYPE in JS ?

Almost all objects in JavaScript have the prototype property. By using it and more specifically the prototype chain we can mimic inheritance.

The prototype is a reference to another object and it is used whenever JS can’t find the property you’re looking for on the current object.

Prototypal Inheritance

Suppose we have an object called users with all its properties and methods and there are student and teacher that is slightly different from it, not copy/reimplement its methods, just build a new object on top of it.

Prototypal inheritance is a language feature that helps in that.

[[Prototype]]

In JavaScript, objects have a special hidden property [[Prototype]] (as named in the specification), that is either null or references another object. That object is called “a prototype”.

When we want to read a property from object, and it’s missing, JavaScript automatically takes it from the prototype.In programming, such thing is called “prototypal inheritance”. Many cool language features and programming techniques are based on it.

The property [[Prototype]] is internal and hidden, but there are many ways to set it.

Get Subhajit Dutta’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

One of them is to use __proto__, like this:

let users = {
  alive: true
};
let teachers = {
  class_admin: true
};

teachers.__proto__ = users;

Please note that __proto__ is not the same as [[Prototype]]. That’s a getter/setter for it. We’ll talk about other ways of setting it later, but for now __proto__ will do just fine.

If we look for a property in teachers, and it’s missing, JavaScript automatically takes it from users.

et users = {
   alive: true
};
let teachers = {
  class_admin: true
};

teachers.__proto__ = users;

// we can find both properties in teachers now:
alert( teachers.alive ); // true
alert( teachers.class_admin ); // true

The value of “this”

That is actually a super-important thing, because we may have a big object with many methods and inherit from it. Then we can run its methods on inherited objects and they will modify the state of these objects, not the big one.

For instance, here animal represents a “method storage”, and rabbit makes use of it.

Summary

In JavaScript, all objects have a hidden [[Prototype]] property that’s either another object or null.
We can use obj.__proto__ to access it (there are other ways too, to be covered soon).
The object referenced by [[Prototype]] is called a “prototype”.
If we want to read a property of obj or call a method, and it doesn’t exist, then JavaScript tries to find it in the prototype. Write/delete operations work directly on the object, they don’t use the prototype (unless the property is actually a setter).
If we call obj.method(), and the method is taken from the prototype, this still references obj. So methods always work with the current object even if they are inherited.