3.Prototype

Introduction

The prototype in javascript means relation between two object’s context (means ‘this’ context). In other words prototype links two objects through context. After you linked two objects through prototype. the this context inside the function of both object is treated as same.

But the prototype linking is possible only when you create an object with constructor patter and you want to attach an object to the context of that created object. Lets have a look at how another object can be linked to prototype of constructor object.

Constructor pattern

Constructor pattern is one of the way to create objects in javascript. This pattern is used to create object which implies class like pattern. and prototype is used extensively in creating class’s like construct in javascript.You might be already aware of this, but there is much more things going on which you might not aware of. So don’t skip this part and let’s have a look.

Let’s define a class Employee with property name and functions getName and setName

 1 function Employee()
 2 {
 3     this.name='';
 4 }.prototype={
 5     getName:function(){
 6        return this.name;
 7     },
 8     setName:function(value){
 9        this.name=value;
10     }
11 }
12 
13 var empObj=new Employee();

Here the instance for the class is created using new keyword, will have detail look at this keyword in another chapter.Now lets focus on prototype.As i already told prototype is related to context. In the constructor pattern, this context is used to form the object and with prototype in place whatever object attached to it is also part of this. But there is another variant to it which is not mentioned. Employee class can be created without using the prototype. Like below

 1 function Employee()
 2 {
 3     this.name='';
 4     this.getName=function(){
 5        return this.name;
 6     };
 7     this.setName=function(value){
 8        this.name=value;
 9     };
10 }

Both way of defining the class have same effect, but the recommended way is the first approach. Property’s value should be attached to this directly and methods should be from separate object. Because for each object there is separate instance created for the properties and prototype object which has function’s will be shared between all the instance of the object. If you define the function inside the constructor , for each object there will be a separate object created for the function’s of the class as well.

Built-In Objects Vs Created Objects

The built-in types in javascript also uses the same constructor pattern to define their class like definition. and that build-in types also uses prototype to define their functions of the class. Example for such types are Date,Array,Number,String..etc.

So for objects created using built-in types or types which defined in local javascript will not have its prototype property as undefined.

1 var obj={};
2 console.log(obj.prototype);     //prototype is undefined
3 
4 var dateObj=new Date();
5 console.log(dateObj.prototype); //prototype is object

When you create object from scratch its prototype is undefined, when when you create object from built-in type its prototype is not undefined, since the prototype contains all the supporting methods for that built-in type.