Javascript Prototype

Prototype Property

All objects inherit methods and properties from Object.prototype. Every JavaScript function has a prototype property, and you can attach properties and methods on this prototype property when you want to implement inheritance.

Example

function Person(name, address, email) {
  this.Name = name;
  this.Address = address;
  this.Email = email;
}

// We add the print () method to Person prototype property 
so that other instances (objects) can inherit it
Person.prototype.print = function () {
document.write(Person.name);
document.write(Person.address);
document.write(Person.email);
}
// Create a new object with the Person () constructor, thus allowing this new object 
to inherit Person's properties and methods
var newObj = new Person ("Jimi","12-13/A","jimi@yahoo.com");

//newObj inherited all the properties and methods, 
including the print method, from the Person function
newObj.print ();

Prototype Attribute

An object's prototype attribute points to the object's "parent" - the object it inherited its properties from. The prototype attribute is normally referred to as the prototype object, and it is set automatically when you create a new object

Similarly Javascript objects can have properties, which define their characteristics. There are lot of ways to create an objects in Javascript below are the some more popular ways.

Prototype Attribute of Objects Created with new Object () or Object Literal

Example

//The person object inherits from Objec
var person = new Object();
var objPerson = {name: "Jimi"} ;
document.write (objPerson.name);

Prototype Attribute of Objects Created With a Constructor Function

Example

//The person object inherits from Objec
var person = new Person(name)
{
this.name = name;
};
var objPerson = new Person("Jimi");
document.write (objPerson.name);

How Prototype is important and When is it Used?

These are two ways the prototype is used in JavaScript.

Prototype Property: Prototype-based Inheritance

In Javascript prototype is play important roll because JavaScript does not have classical inheritance based on Classes. JavaScript has a prototype-based inheritance mechanism. You can implement inheritance using the prototype property.

Example

<html>
<head>
<script type="text/javascript">
function Country(country) {
this.country = country;
}

//Add showNameAndColor method to the country prototype property
Country.prototype.showFoodName =  function () {
document.write(this.foodName + " is " + this.country + " food.");
}

function Food (foodName) {
this.foodName = foodName;
}

//Set the Food's prototype to Country's constructor, 
thus inheriting all of Country.prototype methods and properties
Food.prototype = new Country("Chaina");

//Creates a new object, objFood, with the Food constructor?
var objFood = new Food ("Noodles");

//Here, objFood uses the name property from the objFood object prototype, 
which is Food.prototype
document.write(objFood.foodName + "</br>"); // Noodles

//The objFood object inherits all the properties and methods from both 
the Country and Food functions
document.write(objFood.showFoodName()); // Noodles is Chaina food.
</script>
</head>
<body>
</body>
</html>

This will produce following result

Noodles
Noodles is Chaina food.

Prototype Attribute: Accessing Properties on Objects

In Javascript prototype is also important for accessing properties and methods of objects. JavaScript has a prototype-based inheritance mechanism. You can implement inheritance using the prototype property.

Example

<html>
<head>
<script type="text/javascript">
function Person() {
this.star = "Brad Pitt";
}
// Define "cricketer" property on the Person prototype
Person.prototype.cricketer = "Sachin Tendulker";

var famousPerson = new Person ();
famousPerson.star = "Will Smith";

// The search for star will first look for the star property on the 
famousPerson object and show Will Smith
document.write(famousPerson.star + "</br>");

// This will show the property from the famousPerson prototype Sachin Tendulker
document.write (famousPerson.cricketer + "</br>");

// This will show [object Object]
document.write(famousPerson.toString());
</script>
</head>
<body>
</body>
</html>

This will produce following result

Will Smith
Sachin Tendulker
[object Object]

See Also

Javascript Built in String Object
Javascript Built in Number Object
Javascript Built in Math Object
Javascript Built in Date Object
Javascript Built in Arrays Object
Javascript Built in Boolean Object
Javascript Built in RegExp Object
Javascript Built in JSON Object


 
SHARE THIS IF YOU LIKE!
submit to reddit
SUBSCRIBE FOR LATEST UPDATES
HAVE WE CONNECTED ON FACEBOOK?
TOP TUTORIALSTOP CODE EXAMPLESTOP LIVE DEMOLINKSSTAY CONNECTED
HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
PHP Tutorial
Developer Tools
Javascript
AngularJS
Google MAP API V3
ASP.NET
Javascript
AngularJS
Google MAP API V3
Contact Us
Advertise with Us
Privacy Policy
Disclaimer
Stay connected. We actually like you. If you want to get up to the minute updates, then connect with us on your fav below.
 
Twitter   Linkedin   Facebook   Google+    RSS   Pinterest
 
Protected by Copyscape Original Content Checker
 
 
Copyright ©2017 www.techstrikers.com Unauthorized reproduction/replication of any part of this site is prohibited.