Introduction to Javascript Prototype
JavaScript is an object-oriented language, but in JavaScript terminology objected oriented language is called Prototype oriented language.
The prototype has a state and also behavior.
- State: General characteristics are called as State of the Prototype. In JavaScript, variables show the state of the object or prototype.
- Behavior: Exposing the output from the state is called as behavior. In JavaScript, methods show the behavior of the object or Prototype.
Example: A man has age, color, name, and height, etc. are called states, man can walk, run, eat and drink, etc. are called the behavior of the person.
How does Prototype work in JavaScript?
- Usually, in Java at the time of constructor creation object is created whereas in JavaScript at the time of function creation object or prototype property added inside the function.
- Basically Prototype property is a Prototype Object. If we want we can add methods and properties to the prototype object.
- All properties and methods in JavaScript are taken or inherited from the Prototype object.
Syntax:
ObjectName.prototype.getProperty=function()
{
//code
}
var v=new Object(values,….);Why do we move into the concept of Prototype?
Below examples illustrate why we are discussing the prototype concept in JavaScript
Example #1
<html>
<body>
<script>
function Company(name)
{
this.name=name; //this keyword used for instance of the same object
this.getName=function()
{
return this.name;
}
}
var company1=new Company("Verinon");
var company2=new Company("Oracle");
document.write(company1.getName()+"<br>");//<br>gives you new line
document.write(company2.getName());
</script>
</body>
</html>Output:
Explanation
- The above code is working fine but the problem with getting the output from the approach.
- If we want to create 200 Company objects there will be 200 copies of getName()
- But, we don’t want to be creating copies of functions instead we want all the objects to share the same function code.
- So, we can achieve the same output by Prototype
Example #2
<html>
<body>
<script>
function Company(name)
{
this.name=name;
}
Company.prototype.getName=function()
{
return this.name;
}
var company1=new Company("Verinon");
var company2=new Company("Oracle");
document.write(company1.getName()+"<br>");
document.write(company2.getName());
</script>
</body>
</html>Output:
Explanation:
- Here, all the objects to share the same function code but not creating copies of functions.
- And also no matter how many objects you create, functions are loaded only once into the memory
- If you want you can also override functions in the above code.
Examples of Javascript Prototype
Below are some different examples of Prototype:
Example #1. User-defined Prototype
Syntax:
ObjectName.prototype.getProperty=function()
{
//code
}
var v=new Object(values,….);Code:
<!DOCTYPE html>
<html>
<body>
<font color="green"><h2>User Defined Prototype</h2></font>
<script>
function Cricket(batsmen, bowler)
{
this.batsmen=batsmen;
this.bowler=bowler;
}
Cricket.prototype.getBatsmen=function()
{
return this.batsmen;
}
Cricket.prototype.getBowler=function()
{
return this.bowler;
}
var cricket=new Cricket("Rohith Sharma","Jasprit Bumra");
document.write("Indian Batsman :"+cricket.getBatsmen()+"<br>");
document.write("Indian Bowler :"+cricket.getBowler());
</script>
</body>
</html>Output:
Explanation
- Cricket.prototype.getBatsmen gives you batsmen name.
- Cricket.prototype.getBowler gives you bowler name.
- Both cases share the same function code but not creating copies of functions.
Example #2. Date Prototype
Syntax:
var date=new Date("January 21, 2019 10:10:10 AM");Code:
<!DOCTYPE html>
<html>
<body>
<font color="green"><h2>Date Prototype</h2></font>
<script>
var dateFormat=new Date("January 21, 2019 10:10:10 AM");
var date=dateFormat.getDate();
var year=dateFormat.getFullYear();
var hours=dateFormat.getHours();
var milliSecs=dateFormat.getMilliseconds();
var minutes=dateFormat.getMinutes();
var month=dateFormat.getMonth();
var secs=dateFormat.getSeconds();
document.write("Date: "+date +"<br>");
document.write("Year "+year+"<br>");
document.write("Hours "+hours+"<br>");
document.write("MilliSeconds "+milliSecs +"<br>");
document.write("Minutes "+minutes +"<br>");
document.write("Month "+month+"<br>");
document.write("Seconds "+secs);
</script>
</body>
</html>Output:
Explanation
- Date prototype gives you date, year, month, hours, minutes, seconds, milliseconds.
- Here Month January starts with 0 and December ends with 12.
- Above code, we have only hours, minutes and seconds (10:10:10 respectively). So, milliseconds becomes 0.
Example #3. Boolean Prototype
Syntax:
Boolean.prototype.name=value assignedCode:
<!DOCTYPE html>
<html>
<body>
<font color="green"><h2>Boolean Prototype</h2></font>
<script>
function getMyBooleanResult(value) {
if (value==false)
return (value + " is wrong");
else
return (value + " is correct");
}
Boolean.prototype.getMyValue=false;//adding new property
Boolean.prototype.getMyMethod=getMyBooleanResult; //adding new method
var boolean=new Boolean();//creating new boolean object type
document.write(boolean.getMyMethod(10) + "<br>");
document.write(boolean.getMyMethod(0) + "<br>");
document.write("My Value is :" + boolean.getMyValue);
</script>
</body>
</html>Output:
Explanation
- The boolean prototype can take either true or false values.
- In the above code, I just have taken 10 and 0 values to print true or false from getMyBoolean()
Example #4. String Prototype
Syntax:
String.prototype.methodOfString()Code:
<!DOCTYPE html>
<html>
<body>
<font color="green"><h2>String Prototype</h2></font>
<script>
function getIndex() {
var string = 'Amardeep';
var output = string.charCodeAt(5);
document.write("Amardeep character index value is :"+output);
}
getIndex();
</script>
</body>
</html>Output:
Explanation
- String Amardeep has 8 characters. But in JavaScript string value the first character starts with 0.
- So,charCodeAt(5) gives you
- But, JavaScript gives e value as 101. It is the Unicode value of e.
Conclusion
Properties and methods all are inherited from prototype objects only and prototype code creating copies of functions instead of all the objects to share the same function code.
Recommended Articles
This is a guide to Javascript Prototype. Here we discuss how does Prototype work in JavaScript along with the different examples. You may also have a look at the following articles to learn more –
