Post
Ask Question

Constructors in JavaScript

Introduction

 
A constructor is a function that instantiates a new object. This is done only when memory has been allocated for it. We create a new object like this:
  1. var obj=new Object();  
  2. var obj={};  
  3. var n=new Number(10);  
Here we create a Number Object 
 
We can also create a custom constructor function like this:
  1. function Calc(a,b,Total)  
  2. {  
  3.   this.a=a;  
  4.   this.b=b;  
  5.   this.Total=Total;  
  6. } 
Now we can easily invoke the Calc constructor like this:
  1. var c1=new Calc(20,10,0); 

Prototype

 
A Prototype is a property of a function in JavaScript. So when we invoke the Constructor to create an object, all the properties of the constructor's prototype are available to the newly created object.
 
Now we will use an example in which we will set a method (add()) on the prototype. Here we create multiple objects of Calc, these objects can access the add() function as in the following.
 
Example 1
  1. <head id="Head1" runat="server">  
  2. <title>Untitled Page</title>  
  3. <script language="javascript" type="text/javascript">  
  4.     function Calc(a, b, Total) {  
  5.         this.a = a;  
  6.         this.b = b;  
  7.         this.Total = Total;  
  8.         Calc.prototype.add = function add() {  
  9.             this.Total = this.a + this.b;  
  10.             return this.Total;  
  11.         }  
  12.     }  
  13.     var c1 = new Calc(20, 10, 0);  
  14.     alert(c1.add());  
  15.      
  16.     </script>  
  17. </head>  
  18. <body onload="Calc(x,y,t)">  
  19.     <form id="form2" runat="server">  
  20.     <div>     
  21.     </div>  
  22.     </form>  
  23. </body> 
Here we create a function add(), using the function we add the two values (a,b) and assign the total (Total) and return the value of Total.
 
Then, we invoke the Calc Constructor like this:
  1. var c1=new Calc(20,10,0);  
  2. alert(c1.add()); 
Here we assign the value: a=20,b=10, Total=0.
 
So the output will be:
 
protype in javascript
 
In this program we use Prototype like this:
 
Calc.prototype.add=function add(){
 
Now we create another Calc() object like this: 
  1. var c2=new Calc(30,15,0);  
  2. alert(c2.add()); 
And the output is:
 
Prototype
 
Example 2
  1. <script language="javascript" type="text/javascript">  
  2.         function Student(name) {  
  3.         this.name = name;  
  4.     }  
  5.     Student.prototype.Total = function () { return 300; };  
  6.     Student.prototype.Total1 = 200;  
  7.     var theStudent = new Student('Mahak');  
  8.     alert(theStudent.Total());  
  9.     alert(theStudent.Total1);  
  10.     alert(theStudent.name);  
  11. </script> 
The output will be:
 
Prototype result


Similar Articles