Updated June 28, 2023
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 behavior. In JavaScript, methods show the behavior of the object or prototype.
Example: A man has age, color, name, height, etc., are called states; a man can walk, run, eat and drink, etc. are called the person’s behavior.
How does a prototype work in JavaScript?
- Usually, in Java, the object is created at the time of constructor creation, whereas in JavaScript, at the time of function creation, the object or prototype property is added inside the function.
- The Prototype property is a Prototype Object. We can add methods and properties to the prototype object if we want.
- 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 the prototype?
The below examples illustrate why we are discussing the prototype concept in JavaScript
Example #1
Code:
<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 create 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
Code:
<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 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 prototypes:
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 the batsmen’s name.
- Cricket. prototype.getBowler gives you the bowler’s 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
- The date prototype gives you the date, year, month, hours, minutes, seconds, and milliseconds.
- Here the Month of January starts with 0, and December ends with 12.
- Above code, we have only hours, minutes, and seconds (10:10:10, respectively). So, milliseconds become 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
Inheritance of properties and methods occurs exclusively from prototype objects, and the prototype code creates copies of functions rather than all objects sharing the same function code.
Recommended Articles
This is a guide to Javascript Prototype. Here we discuss how prototypes work in JavaScript and the different examples. You may also have a look at the following articles to learn more –
