×


Prototypes and Prototypal inheritance in Javascript

The word prototype means an early model or a primary version of a machine or a product.All further version created from that prototype will inherit the properties of that prototype.Prototype-based programming is a style of object-oriented programming in which behaviour reuse is performed via a process of reusing existing objects via delegation that serve as prototypes.(Wikipedia).

Nearly all objects in JavaScript are instances of Object which sits on the top of a prototype chain.The Object.prototype is on the top of the prototype inheritance chainThat means almost all the objects in JavaScript inherit the properties and methods from Object.prototype.JavaScript Date objects inherit from Date.prototype. Array objects inherit from Array.prototype.

Prototype determines the behaviour of a data object.Properties including methods are inherited from the prototype.See the below array which inherits prototypes from Array.prototype.You can see is array,map,reduce etc which are inherited from Array.prototype

Prototypal inheritance

In Javascript a function is a first-class Object.All JavaScript objects inherit properties and methods from a prototype.

In the example above, function Person() is called object constructor function.Wth the new keyword,we can create new objects fusing the constructor function.

both myGo and myGoGo has properties first,last,age,eyecolor and  prototype

We cannot add a new property to an Person directly.we can add it to its prototype.

Do a console .log in your browser .This will help you see the  prototype

 

See the __proto__  property. This property contains the prototype of its class

Prototype chaining

We have a function Person with properties name and age .Now we can create a Employee with a property salary.We add the properties of Person to Employee using the following code.Whenever look for the property name in the Employee,it looks all the way up the prototype chain (to parent if not found to ancestors)up to Person where it finds the name property.

 

 

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *