In this article we are going to discuss prototypes in Javascript.
The whole concept of inheritance in javascript is based on prototype. The prototype based inheritance in javascript is different from inheritance in other languages like java, which has more of a classical inheritance. Trying to import the knowledge of inheritance in other languages into javascript can mess up things, so we need to be careful.
Prototypes in JavaScript are the mechanism by which objects inherit features from one another. JavaScript is often described as a prototype-based language. To provide inheritance, objects can have a prototype object, which acts as a template object from which it inherits methods and properties.
In short, whenever we create an object in javascript, the javascript engine will automatically attach few hidden properties and methods to the objects. Those attachments comes through a link to an object named prototype. The link or reference to the prototype object is made available by inserting a property __proto__ into the object.
Now let us see what this __proto__ property is referring to.
In the case of Array, the property __proto__, is referring to Array.prototype object. In the above example, we created an array, and we got access to numerous properties and methods which we did not create ourselves. Those properties and methods like push, pop, slice etc that comes in as built in methods for the array, got attached to our array through the prototype object. The linking happens through a property, __proto__.
In the case of a string it is referring to String.prototype object. The __proto__ property provides a reference to String.prototype object and makes all the properties and methods in String.prototype available to all our strings.
It is not only the case of an object, even in the case of a function methods like bind, call and apply are made available through the prototype object. Again, it is the __proto__ property that provide a reference to all the properties and methods in the prototype.
Now we will see what is the difference between __proto__ and the actual prototype object. In fact __proto__ is just a reference or a link to the actual prototype object. And the __proto__ property was designed with double underscore to enter side of the word proto to make sure that, it won’t accidentally conflict with a property provided by the developer. We as developers, will never have to touch the __proto__, which will make our code highly inefficient. If anything, we just need to get it done by manipulating the Prototype object itself.
Prototype chaining
When trying to access a property of an object, the property will not only be sought on the object but on the prototype of the object, the prototype of the prototype, and so on until either a property with a matching name is found or the end of the prototype chain is reached. This chaining of prototypes in javascript is called prototype chaining. Thats leads us to another interesting fact that at the end of every prototype chain we will see object. Which means everything in javascript is an object.
If we check the __proto__ of our array, it would be Array.prototype. Then if we go one level deep, then it would refer to Object.prototype. After that we would get a null.
So that is the prototype chain and every thing in javascript will have object as the last object in the prototype chain.
That is all about prototype and prototype chaining in javascript.