Prototype property of JavaScript Object

Prototype property

Objects in JavaScript are based on prototypes. A prototype is a property of an object that serves as the base of another object, defining and implementing members that a new object must have. Prototype property objects are shared amongst all instances of a given object type, and so all instances also share the prototype object’s members.

An object is tied to its prototype by an internal property. While creating a new instance of a built-in type, such as Object or Array, these instances automatically have an instance of Object as their prototype.

Consequently, objects can have two types of members: instance members (also called “own” members) and prototype members. Instance members exist directly on the object instance itself, whereas prototype members are inherited from the object prototype. The prototype members can be created using prototype property of the object. Consider the following example:

//Example 1

//Creating the EventHandler class which is having one instance member eventName

var EventHandler =function(eventName){

this.eventName= eventName;

};

//Prototype property: Defining the addEvent method

EventHandler.prototype.addEvent=function(eventObj){

// …     //do something

};

// Prototype property: Defining the deleteEvent method

EventHandler.prototype.deleteEvent=function(eventName){

//…     //do something

};

// Creating onClickEventHandler object from EventHandler

var onClickEventHandler= new EventHandler(‘onClick’);

//Adding instance property to onClickEventHandler which is accessible to onClickEventHandler only

onClickEventHandler.clickType=’mouseClick’;

// Creating onSubmitEventHandler object from EventHandler

var onSubmitEventHandler= new EventHandler(‘onSubmit’);

// Adding instance property to onSubmitEventHandler which is accessible to onSubmitEventHandler only

onSubmitEventHandler.submitType=’formSubmit’;

When executing the above piece of code, you will get the following object notation:

 

 

 

 

 

 

 

 

 

 

Figure 1: Prototype Object Notation

Each object has it’s own instance members eventName (instance member from Eventhandler class). JavaScript provide the capability to add and delete any member in object at any time. So each object also have its own property clickType for onClicEventHandler and submitType for onSubmitEventHandler.

Both the objects have one (same) copy of prototype (__proto__) object (having method addEvent and deleteEvent). Any method added using prototype property is being added inside the prototype object.

If you notice in above object structure, the prototype object is also having internal prototype (__proto__) member that is the default Object and inherited by every sub object this behavior is known as “Prototype Chaining”.

Will explain in detail about “Prototype Chaining” Prototype Chaining → in next blog.