An introduction to the Javascript Prototype

This post is to introduce you to the concept of the Javascript Prototype with the corresponding understandable code snippets.

Object-oriented languages like C++ and Java have a mechanism for object inheritance. As Javascript also supports objects, it also has an inheritance model.
However, its model is vastly different from that of C++ and Java.

Today we will take a small dive into the model Javascript offers.

The Javascript Prototype

Javascript provides object inheritance via the Prototype Model.

At the topmost level, Javascript has the Object data type. It represents the main class which is the ancestor of every object created. The Object class has a member named ‘prototype'(usually referred to as ‘Object.prototype’). This prototype member is an object where methods that must be inherited by all objects are defined.

When an object is created in Javascript, its prototype is set. Every object in Javascript has one prototype object. The object inherits all its methods and properties from its prototype object.

Let us look at some code to understand this.

const simple_js_object={
  x:1,
  y:2,
};

console.log(simple_js_object);

Here, we create a Javascript object. It has two properties ‘x’ and ‘y’. When we observe the output in the browser console, we see the following:

We see the contents of our object. We also see an additional field labeled

<prototype>: Object {...}

This is the prototype object for our Javascript object, i.e., the prototype object our current object inherits from.

What it is?

Expand the prototype object by clicking on the small arrow on its left.

This prototype object contains a lot of additional properties. Properties which are available to our ‘simple_js_object’ also.

Let us take a simple example. Execute the following code:

console.log(simple_js_object.toString());

The console output for this will be:

[object Object]

Which is the string representation of our object. So we see that methods available on our objects’ prototype are accessible to our object also. So now let us go a little deeper.

How it works

Based on the above discussion, we can create an object diagram to visualize the relationships between the various entities:

Our ‘simple_js_object’ has two attributes ‘x’ and ‘y’. It inherits properties from Object.prototype as seen above. Every prototype object has an attribute called ‘constructor’. This attribute points to the owner of the prototype, i.e., the class the prototype belongs to. In this case, it points to ‘Object’.

Let us see what happens when we call the ‘toString()’ method on our object:

1. The browser first checks for the definition of ‘toString()’ in our object, i.e., in ‘simple_js_object’. As we have not defined the ‘toString()’ method in our object, it is not found.
2. The browser then checks the parent prototype of our object for the method definition, i.e., in Object.prototype. The ‘toString()’ function is executed here as it is defined.

Let us take another example and define a custom method called ‘helloworld()’ on Object.prototype:

Object.prototype.helloworld=function()
{
  console.log('Hello World');
};

And call ‘helloworld()’ on ‘simple_js_object’.

simple_js_object.helloworld();

The output seen in the browser console is:

Hello World