Prototype in JavaScript

Hi Friends,

In this section, thought of talking Javascript objects and inheritance in Javascript. I see people often get confused like how to create objects out of class aka prototype and then use the same. JavaScript is prototype based language, which means inheritance can be used by something called prototype. It means each and every Javascript object has a prototype property which makes inheritance possible in Javascript. Therefore, inheritance is made possible via prototype property which every object has. The prototype property of an object is where we put methods and properties which we want other objects to inherit.

Note:- Each and every object, which we ever create is an instance of object constructor which has bunch of methods in its prototype property.

This is where prototype chain kicks in. Prototype chain is the one which makes inheritance possible. Therefore, we try to access certain method or property of an object, Javascript will try to find that method in the immediate object. But, if it cannot find it, it will look into object’s prototype which is the prototype property of its parent. Therefore, it moves up in prototype chain. And if that method is still not there, it continues to look unless there is no prototype to look at which is null. null is the only one which has no prototype and is therefore its the final link in the prototype chain and in this case undefined will be returned. Let’s see some examples. One fair way of creating object like shown below.

Other way is via blueprint means via class. However, in Javascript its referred as Function Constructor. Via new keyword, when I created the instance, first empty object is created and then function is called with parameters supplied.

Now, let’s go ahead and add method to the constructor like shown below.

However, let’s suppose, we don’t have method attached to constructor but later on I would like to attach to it and use the same while creating new object. In that case, we can make use of prototype property like shown below.

At this instant also, it will create the same result like shown below.

Now, let’s go ahead inspect other properties in the object. Therefore, when I type Tom in the browser, it presented me below stuff.

And one of the important things are __proto__ as highlighted above. This is basically prototype of the Tom object which is prototype property of Employee Constructor.

Here you can see the method, which I have added in the function prototype later. We can also inspect a function constructor’s prototype as shown below. Here, It will show the complete list and type of that. Here, we have only one, hence only one is showing.

And to confirm that prototype of Tom is the prototype of Employee, we can test something like shown below.

Now, to prove the point all of the objects are basically inherited from object itself, we can traverse in prototype chain.

And, here we have bunch of methods which are basically associated with object Function Constructor.

Which means via prototype chain, these object’s method will also be available at our Employee object which is Tom here. Let’s one of these to prove the point.

Here, I have tested whether Desig belongs to Employee object or not, hence it gave true. However, I have also tested for something which is not part of Employee and here it gave false. We can also test whether Tom is object of Employee like