Introduction
We javascript developers have come across this Javascript buzzword Prototype while preparing for interview or sneaking into the codes of npm modules. So, In this blog I will try my best to unfold the hidden mystery of Prototype.
Prototype
Javascript is prototype based language. Every functions and objects has a hidden property called Prototype. With this we can add property to a function and object.The prototype object is special type of enumerable object to which additional properties can be attached to it which will be shared across all the instances(objects) of it's constructor function.
Before object-oriented feature added to javascript, prototype was used for inheritance.
Let's understand it by an example
Suppose we have an function called Person
function Person() {
this.name = "Sanjit";
this.gender = "Male";
}
const person1 = new Person();
person1.age = 23;
console.log(person1.age); //23
const person2 = new Person();
console.log(person2.age); //undefined
As it is known from the above example that after attaching and initializing the age property we are getting output as 23 but after creating a new instance of the constructor function Person, we are getting undefined as the property doesn't get shared across the instances(objects) of the constructor function.
So, To fix this issue Prototype comes into play.
Now we will convert the above example with Prototype.
function Person() {
this.name = "Sanjit";
this.gender = "Male";
}
Person.prototype.age = 23;
const person1 = new Person();
console.log(person1.age); //23
const person2 = new Person();
console.log(person2.age); //23
Difference between prototype and __proto__
But there is a catch that we have to attach and initialize the age property in the Function
itself.
Like every Function's
property can be accessed and initialized by
function-name.prototype
but
for instances(objects) of
Function
e can use
object-name.__proto__
Let's understand by an example.
function Person() {
this.name = 'Sanjit';
this.gender = 'Male';
}
const person1 = new Student();
console.log(Person.prototype); // object
console.log(person1.prototype); // undefined
console.log(person1.__proto__); // object
console.log(typeof Student.prototype); // object
console.log(typeof Person.__proto__); // object
console.log(Person.prototype === person1.__proto__ ); // true
Prototype for adding method
Prototype can also be used for adding methods to a constructor function or object. Suppose we want to add a method to check whether the person is an adult or not.
Let's understand by an example.
function Person() {
this.name = 'Sanjit';
this.age = 18;
}
Person.prototype.isAdult = function(){
if(this.age>=18)
return "You are an adult"
return "Your are not an adult"
}
const person1 = new Student();
console.log(person1.isAdult()) //You are an adult
With the help of prototype inheritance, we can add methods and properties to Standard javascript object like Array, Object, String, Number etc.
Conclusion
In this article we learnt about the ins and out of prototype and it's implementation. Following things to be taken care of while using prototype -
- Only modify your own prototypes. Never modify the prototypes of standard JavaScript objects.
- Use it only when it is needed.
Thank you for Reading...