Prototypes in JavaScript!
Published: 2022-06-07 15:58:17


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jn7wmvw86tae27a9ika.png)
 
Prototypes is one of the most important pillars in JavaScript! In this article we will understand what are prototypes ,what are global objects , what is this __proto__ property and how inheritance works in JavaScript underneath the hood.
So lets get started without further ado,
When we create a function in JavaScript, JavaScript Engine creates two objects :-
The Function Object itself
The Prototype Object 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3ut3b21lbhwduiifw7a.png)
For eg consider this,
Let say we create a function f1() as follows,
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfjuhk4ev89op96vmyve.png)
 
Then what JS Engine does is , it creates two objects as mentioned above,
The f1 function object itself and f1 function's Prototype Object,
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntxz9w3j5jfgx1pztevr.png)
 
Now what's this prototype that you can see inside this f1 Object?
Well, JS Engine creates a property on function Object that points to the function's Prototype Object.
We can access the f1 object directly by doing this,
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ipzcolokac6brdelatm.png)
 
However if we want to access the f1's prototype Object we can access it by using that prototype property,
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9rcmgoerp9a7yfgytk4.png)
 
Now suppose we create a new object from that f1 function
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nv9y74a7cf0832oyw1d.png)
 
and if we access it , we can see that there is something called as __proto__
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yngrn2525uz8qe688lav.png)
 
This __proto__ is property that JS Engine creates for every object ! Well ,this __proto__ property points to the Prototype Object of the function(In this case it will point to f1's Prototype Object)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7aaqrb0s3f1quz7g8k4o.png)
 
We can check whether f1's prototype property and myobj's prototype property point to the same Prototype Object or not, by doing this,
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tifg7t87ej2glk4auxbx.png)
 
as we saw above , that we can access function's prototype Object , in the similar way we can access the f1 Object itself by using a property called constructor. Constructor is a property on the Prototype Object that helps us to access the function itself.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5tui1cox8xbiwjogz43.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2x6rbhwyzr1uh5769xmu.png)
  
Suppose if we want to know who created this object 'myobj' , then we what we need to do is, simply use that constructor property to know this,
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7w477fp1rlp2hn0zwab.png)
 
Thus we get the f1 function !
We can also create a new object by using this constructor property,
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7509zpt8tiy8n2fm0w2m.png)
 
This simply implies , create an object myobj2 by using the same function/constructor who created the object myobj.
Up until now we saw what is this prototype property, what is this __proto__ property and the constructor property , what all things do they point to and what are their uses!
However it is not recommended to use __proto__ property very often!
The Global Object
In JRE ,just as you have a global window object , in the similar way you also have a global functions. And one of those global functions is called Object. Name of the function is Object but the type is function .But since functions are Objects in JavaScript, this is also considered as an Object . I know this sounds a bit confusing!😬
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3accd13trq031k7wzeoy.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijwi7c3yhfpu5hq71f2w.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggz3sy4pyoe1s4m6vws0.png)
   
The Prototype Object!
Lets create a function person and a new p1 object from it,
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43vka9q67gur4r6t3orx.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ojyoqv9tbb2kt5gt97yw.png)
  
Looking at the Person's prototype object, makes us wonder ,who created this Person's prototype object ?
Well it was automatically created by 'new Object'! Person's prototype Object itself has __proto__ property that points to the Global Object's Prototype.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dy57d5lb64t5hyb3kjjk.png)
 
Suppose if we try to access any property on p1 object , JS Engine will first try to find it inside p1. If it does not find it there , it will go up the prototype chain by using the __proto__ property of p1 .
p1.__proto__
If it even does not find it there also , it will again go one step up the prototype chain.
p1.__proto__.__proto__
And if it does not find it there as well, then it will return undefined!
Now there's one question , is this prototype chain never ending? Does base object's prototype have a __proto__ property as well?
Well no, it does have __proto__ property ,but it points to null. Lets check this,
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31euk8wrtlj1zt0p0p26.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pmxmwfaygpw0h2mz62q.png)
  
Prototypal Inheritance
Inheritance in JS is totally different than other programming languages. Its unlike classical inheritance.
Suppose if we have a Person function (as discussed above) .And now we also have a Teacher function .Teacher will have all the properties of Person.
Initially Person's Prototype as well as Teacher's prototype(__proto__ ) property both are pointing towards base Object's Prototype.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99upygzi4cwt0xvys0w9.png)
 
In this case , Teacher and person are not related. Teacher will not posses any property of Person. Well to overcome this, we can make the Teacher's prototype object(__proto__ property) to point towards Person's prototype object.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53xuqn8waf362luuzmnr.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7m4u97l0avxl2hxgoq9b.png)
  
Now teacher can access all properties of person .
This was all about Prototypes and Prototypal Inheritance!
Hope this article helps!
Happy learning!😀