Firstly, let’s think of when we want to use prototypes. Um-mm, look at the example below:

var arr=[1,2,3];

Now we want to fetch the last element from this array. We can do this by:

var last=arr[arr.length-1]; //This is nice

But, If we define a property named ‘last’ which could get us the last element from any array, then things would become much more easier and maintainable. See below:

var last=arr.last;

Here comes the role of Prototype,

Object.defineProperty(Array.prototype, ’last’ ,{get: function()

{return this[this.length-1];}});

Here , I have defined a property on the prototype of the Array object i.e. ‘last’ and then defined a get function to get the last element. Now , I can get the last element for any array using the property last.

var arr1=[4,5,6]; arr1.last; // This would give me 6.

Now , let’s take a closer look at Prototypes:

Prototypes are the object that exist on every function in JavaScript. If I create a function and access its prototype like this:

function myFunc(){

}

console.log(myFunc.prototype);//{}

Prototype property on a function is just an empty object. We can assign further properties to this object. For ex,

myFunc.prototype.age=3;

Here I have defined a property age on the prototype of myFunc.

However, Objects do not have a prototype property. Instead, they have a ‘_proto_’ property. For ex,

var person={name:’abc’};

console.log(person.prototype); // undefined

console.log(person._proto_);//Object {}

Let’s look at ‘_proto_’ and ‘prototype’ together. Let’s take a code example,

function Person(name, color){

this.name=name;

this.color=color;

}

var developer=new Person('varun','blue');

console.log(Person.prototype);//Person{}

console.log(developer._proto_);//Person{}

In the example above, both Person.prototype and developer._proto_ are pointing to the same instance. Infact, they are the same instance.

console.log(Person.prototype===developer._proto_);//true

Let’s define a property on the prototype object on the example taken above . For ex,

Person.prototype.age=3;

console.log(Person.prototype);//Person{age:3}

console.log(developer._proto_);//Person{age:3}

Now if I want to display age property of the developer object, then I will get 3.

console.log(developer.age);//3

Even though the developer object does not have its own age property which can be checked as mentioned below:

console.log(developer.hasOwnProperty('age');//false

But we are still getting the value because what JavaScript does here is, firstly it checks the age property for the object and if it does not get that, then it checks the prototype and if it finds that property in the prototype, it displays the value of that property. We can say here that the developer object has inherited the age property from the person. This is called prototypal inheritence.

Now, if I define age property for developer object like,

developer.age=4;

console.log(developer.age);//4

console.log(developer._proto_.age);//3

In the above code, we can see that developer object has age as its own property while if we check the prototype age property , it still gives us the value 3. So, we can say that the instance properties always override the prototype properties as we are getting the developer.age as 4.

Consider one more case in prototypes. Let’s consider the code example below,

function Person(name, color){

this.name=name;

this.color=color;

} Person.prototype.age=3;

var developer=new Person('varun','blue'); Person.prototype={age:5};// New object created in memory

var tester=new Person('abc','red');

console.log(developer.age);//3

console.log(tester.age);//5

Here, we can see that the developer.age gives us the value 3 while tester.age gives us the value 5. This is because the developer object points to old prototype object and the old prototype object has the value for age as 3 while the tester object points to new prototype object defined which has the value for age as 5.

So, that’s all. If you liked it, feel free to share. Any questions are welcome :)