Javascript – Prototype Object

Posted: November 22, 2010 in Javascript
Tags: ,

If u’re interested in extending JavaScript and creating your own objects and libraries, the prototype object is a must learn topic.

Like the the pre-built ones, such as document or Math, Custom objects allow us to build up our own personal JavaScript “toolbox” that extends beyond what the pre-build objects have to offer.

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, we’re allowed to add custom properties to both prebuilt and custom objects.

Ex:

<script type=”text/javascript”>
function computearea() {
var area = this.radius * this;
.radius * 3.14;
return area;
}
function computediameter() {
var diameter = this;
.radius * 2;
return diameter;

}
function circle(r) {
//property that stores the radius
this.radius = r;
this.area = computearea;
this.diameter = computediameter;
}

var mycircle = new circle(20);
//alerts 1256
alert(“area=”+ mycircle.area());
//alerts 400
alert(“diameter=”+ mycircle.diameter());

</script>
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.radius would by default return “undefined” until I go over the process again of first defining bigcircle.radius, as with mycircle.

When you just wished all instances of the object would recognize the custom property, that’s where the prototype object of JavaScript comes in.

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.14159;
// create the object method
function alertmessage(){
alert(this.pi);
}

circle.prototype.alertpi=alertmessage;

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

Let’s see an interesting example on how to extend the prebuilt String object of JavaScript to include a method that writes any string backwards when called upon

<script type=”text/javascript”>
/*code for extending String object with method that writes text backwards*/
//core custom method for writing text backwards
function outputbackwards(){

for (i=this.length-1;i&gt;=0;i–)
document.write(this.charAt(i));
}

//Attach custom method to string object
String.prototype.writeback=outputbackwards;
var message1=”Welcome to my site!”;
message1.writeback();
var message2=”Today is a beautiful day”;
message2.writeback();

</script>

call() vs apply()

JavaScript 1.3 includes two new methods for the Function object, call() and apply(). The apply() method is a variation on the call() method. The apply() method lets you pass the parameters from one method to the other in a different way than the call() method does it.

The call() method requires the full list of parameters, as shown in the previous page: exterior.call(this, extColor, doorCount, airWing, tireWidth);

The apply() method, on the other hand, lets you specify arguments on its second parameter: exterior.apply(this, arguments);

References

The prototype object of JavaScript – http://www.javascriptkit.com/javatutors/proto.shtml
JavaScript closures – http://www.mennovanslooten.nl/blog/post/62
JavaScript 1.3 Overview, Part I – http://www.webreference.com/js/column25/index.html
JavaScript 1.3 Overview, Part II – http://www.webreference.com/js/column26/index.html
Object Oriented Programming in JavaScript – http://mckoss.com/jscript/object.htm

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s