Javascript Object 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.

Using Constructor Method

In Javascript, their are different ways to defining method to an object.

Javascript Prototype Property 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 Object created with new Object() or Object Literal

Javascript Object Created with new Object() Example

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

Prototype Attribute of Objects Created With a Constructor Function

Javascript Object Created with Constructor Example

//The person object inherits from Object
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.

Javascript Prototype-based Inheritance 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.

Javascript Accessing Properties 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]