What is proto-type based programming ?
This is a type of programming methodology in which already created objects are cloned and
re-used to construct a program.
Is Javascript a proto-type based programming ?
Yes, Javascript is a proto-type based programming language.
Whenever a new function is created, the javascript engine adds a prototype property to that function.
This newly added property is the prototype object, which also contains constructor property by default.
The constructor property points back to the function on which prototype object is a property.
We can access the function’s prototype property using FunctionName.prototype.
Basics of javascript for beginners !!!
Click to Learn More about – Javascript online learning
Syntax :
className.Prototype.methodName
How proto-type works ?
When a new object is created its corresponding functions are loaded into memory.
This means a new copy of functions are created whenever a new object is created.
The proto-type concept is that all the objects share the same functions.
So Its not necessary to create all the functions again and again whenever an object is created.
For the first object all the functions are created in memory.
By reusing the same functions upon creation of new objects is the proto-type approach in javascript.
Javascript works in this proto-type approach in order to become more efficient and quicker process.
This can be explained in two ways.
1. Adding new method to the constructor method.
2. Adding new property to the constructor method.
1. Adding new method to the constructor method.
Example :
<script>
function StudentInfo(fname,lname,age,address){
this.fname=fname;
this.lname=lname;
this.age=age;
this.address=address;
}
var a = new StudentInfo("Abdul","Kalaam","87","Chennai");
document.writeln("<b>Student Info </b><br/>");
document.writeln("FirstName = " +a.fname+"<br/>");
document.writeln("LastName = " +a.lname+"<br/>");
document.writeln("Age = " +a.age+"<br/>");
document.writeln("Address = " +a.address+"<br/><br/>");
var b = new StudentInfo("Rahul","Dravid","37","Banglore");
document.writeln("<b>Student Info </b><br/>");
document.writeln("FirstName = " +b.fname+"<br/>");
document.writeln("LastName = " +b.lname+"<br/>");
document.writeln("Age = " +b.age+"<br/>");
document.writeln("Address = " +b.address+"<br/><br/>");
document.writeln("<b>Adding new method to the constructor method. </b><br/><br/>");
function StudentInfo(fname, lname, age, address) {
this.fname = fname;
this.lname = lname;
this.age = age;
this.address = address;
}
StudentInfo.prototype.name = function() {
return this.fname + " " + this.lname
};
var c = new StudentInfo("Abdul", "Kalaam", 50, "Chennai");
document.writeln("FullName = " + c.name()+"<br/>");
var d = new StudentInfo("Rahul", "Dravid","37","Banglore");
document.writeln("FullName = " + d.name()+"<br/>");
</script>
Output :
2. Adding new property to the constructor method.
Example :
<script>
function StudentInfo(fname,lname,age,address){
this.fname=fname;
this.lname=lname;
this.age=age;
this.address=address;
}
var a = new StudentInfo("Abdul","Kalaam","87","Chennai");
document.writeln("<b>Student Info </b><br/>");
document.writeln("FirstName = " +a.fname+"<br/>");
document.writeln("LastName = " +a.lname+"<br/>");
document.writeln("Age = " +a.age+"<br/>");
document.writeln("Address = " +a.address+"<br/><br/>");
var b = new StudentInfo("Rahul","Dravid","37","Banglore");
document.writeln("<b>Student Info </b><br/>");
document.writeln("FirstName = " +b.fname+"<br/>");
document.writeln("LastName = " +b.lname+"<br/>");
document.writeln("Age = " +b.age+"<br/>");
document.writeln("Address = " +b.address+"<br/><br/>");
document.writeln("<b>Adding new property to the constructor function. </b><br/><br/>");
StudentInfo.prototype.qualification = "BE"
var c = new StudentInfo("Abdul", "Kalaam", 50, "Chennai");
document.writeln("Newly added Qualification = " + c.qualification+"<br/>");
</script>
Output :
