Javascript Prototype

The prototype object of JavaScript, introduced starting in JavaScript 1.1, is a prebuilt object that simplifies the process of adding custom properties/ methods to all instances of an object.

In JavaScript, you're allowed to add custom properties to both prebuilt and custom objects. Here's an example of each:

//adding a custom property to a prebuilt object
var myimage=new Image()
myimage.size="26k"

/*adding a custom property to the custom object "circle"*/
//First, create the custom object "circle"
function circle(){
}
var smallcircle=new circle()
smallcircle.pi=3.14159

A custom property added this way only exists for that instance of the object. If I were to spit out another instance of circle(), called "bigcircle", for example, bigcircle.pi would by default return "undefined" until I go over the process again of first defining bigcircle.pi, as with smallcircle.

There are times when you'll want to add a custom property that's only reflected on a particular instance of an object, and times, when you just wished all instances of the object would recognize the custom property already. For example, all circles- and not just small circles- have a pi, so it's reasonable to assume you'd like the custom property "pi" added in a way so that it's default across all instances of the circle object. That's where the prototype object of JavaScript comes in.

Using the prototype object to add custom properties to objects
The prototype object is here to help when you wish to quickly add a custom property to an object that is reflected on all instances of it. To use this object, simply reference the keyword "prototype" on the object before adding the custom property to it, and this property is instantly attached to all instances of the object. A demonstration is worth a thousand words, so I'll show one right now: Let's define the custom property "pi" in the above in a way so it's a default property of all instances of circle():

//First, create the custom object "circle"
function circle(){
}
circle.prototype.pi=3.14159Having done the above, all instances of circle() now has the pi property prebuilt into them.

There is an important thing to take note at this point in the tutorial. While you are free to use the prototype object on any custom objects, this is NOT the case with prebuilt ones (such as image, string etc). JavaScript only allows you to "prototype" prebuilt objects that are created with the new keyword, such as the following:

The image object
The string object
The date object
The Array object
In the final part of this tutorial, I'll demonstrate an example involving prototyping a prebuilt JavaScript object.

Let's move on to see how to use the prototype object to add custom methods.

Using the prototype object to add custom methods to objects
The prototype object can also help you quickly add a custom method to an object that is reflected on all instances of it. To do so, simply create the object method as usual, but when attaching it to the object (you guessed it), use "prototype" beforehand. Let's extend our circle object so it contains a default method that does something simple, like alert the value of PI:

//First, create the custom object "circle"
function circle(){
}
circle.prototype.pi=3.14159

// create the object method
function alertmessage(){
alert(this.pi)
}
circle.prototype.alertpi=alertmessageNow, all instances of the circle object contain a alertmessage() method!

from: http://www.javascriptkit.com/javatutors