Hello friends, In this article, we will learn, What is JavaScript Prototype ? How to use JavaScript Prototype ?
All the Objects in JavaScript are instances of JavaScript root Object. They are inherit properties from Object.prototype, Which may be overridden (Shadowed). Any change in Object prototype are applied to all objects inherit from it.
The main advantage of prototype is instance. if we will add, modified properties or methods with prototype, it will be applicable for all object inherit from it.
We can create prototype as follows.
First we will create constructor.
var BaseClass = function(){};
We can create object of BaseClass as follows.
var ChildofBaseClass = new BaseClass();
Which is parameter-less constructor. You can also create parametarised constructor as follows.
var BaseClass = function(prop1,prop2,prop3){
this.prop1 = prop1;
this.prop2 = prop2;
this.prop3 = prop3;
};
We can create object of BaseClass as follows.
var ChildofBaseClass = new BaseClass(12,34,56);
We can access properties of ChildBaseClass as follows.
var BaseClass = function(prop1,prop2,prop3){
this.prop1 = prop1;
this.prop2 = prop2;
this.prop3 = prop3;
};
var ChildofBaseClass = new BaseClass(12,34,56);
console.log(ChildofBaseClass.prop1);
console.log(ChildofBaseClass.prop2);
console.log(ChildofBaseClass.prop3);
OUTPUT: 12 34 56
Lets add new Method for BaseClass, which will add two numbers.
BaseClass.AddTwoNumbers = (a,b)=>(a+b);
Access BaseClass Method
ChildofBaseClass.AddTwoNumbers(12,23);
An Exception appears
Uncaught TypeError: ChildofBaseClass.AddTwoNumbers is not a function
To add method to BaseClass we will use Object prototype.
BaseClass.prototype.AddTwoNumbers = (a,b)=>(a+b);
Now we can share this method with all objects of BaseClass.
Let invoke BaseClass Method AddTwoNumbers by its object ChildofBaseClass
var BaseClass = function(){};
BaseClass.prototype.AddTwoNumbers = (a,b)=>(a+b);
var ChildofBaseClassA = new BaseClass();
var ChildofBaseClassB = new BaseClass();
var ChildofBaseClassC = new BaseClass();
console.log(ChildofBaseClassA.AddTwoNumbers(1,1));
console.log(ChildofBaseClassB.AddTwoNumbers(1,2));
console.log(ChildofBaseClassC.AddTwoNumbers(1,3));
OUTPUT: 2 3 4
Let change method funtionality from addition to multiply and view result.
var BaseClass = function(){};
BaseClass.prototype.AddTwoNumbers = (a,b)=>(a+b);
var ChildofBaseClassA = new BaseClass();
var ChildofBaseClassB = new BaseClass();
var ChildofBaseClassC = new BaseClass();
console.log(ChildofBaseClassA.AddTwoNumbers(1,1));
console.log(ChildofBaseClassB.AddTwoNumbers(1,2));
console.log(ChildofBaseClassC.AddTwoNumbers(1,3));
BaseClass.prototype.AddTwoNumbers = (a,b)=>(a-b);
console.log(ChildofBaseClassA.AddTwoNumbers(1,1));
console.log(ChildofBaseClassB.AddTwoNumbers(1,2));
console.log(ChildofBaseClassC.AddTwoNumbers(1,3));
OUTPUT: 2 3 4 0 -1 -2
In such a way we can modify prototype function at any time, which will automatically shared among all of its objects.
If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.
Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.