 Putting things into perspective- Examples
If you're having a hard time staying awake while reading
this tutorial, I can't say I blame you. The prototype object of JavaScript
isn't exactly as flashy and fun to learn as say, document.bgColor or
window.open, and the rewards aren't always instant. But if you're at all
interested in extending JavaScript and creating your own objects and
libraries, the prototype object is a must learn. Allow me to show you now a
couple of practical examples on using the prototype object of JavaScript:
-Example 1-Extending functionality to the pre-built
string() object
As mentioned earlier in this tutorial, the prototype object
can be used on pre-built JavaScript objects created with the
new keyword to add custom properties/ methods to them. 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>=0;i--)
document.write(this.charAt(i))
}
//Attach custom method to string object
String.prototype.writeback=outputbackwards
</script>
The above code may not look like much, but it just added a
whole new functionality to the default string object- the ability to output
any text backwards! Here are a few examples:
<script type="text/javascript">
var message1="Welcome to my site!"
message1.writeback()
var message2="Today is a beautiful day"
message2.writeback()
</script>
Output:
We're playing Frankenstein with the JavaScript language!
-Example 2-Extending functionality to a custom
JavaScript object
For the most part, you'll probably be using the prototype
object to extend and expand a custom JavaScript object you created earlier.
JavaScript developers who create custom objects often know that the
traditional way of assigning custom properties/ methods to an object isn't
exactly a walk in the park (See "Creating Custom
objects in JavaScript"). With the prototype object at hand, however,
this process becomes a lot simpler and intuitive.
I'll quickly demonstrate the concept by first creating a
"dummy object", and using the prototype object- and only this object- to
equip the dummy object with properties and methods:
<script type="text/javascript">
//create dummy object
function dummy(){
}
//Create custom property
function dummyproperty(){
}
//Create custom method
function dummymethod(){
}
dummy.prototype.prop=dummyproperty
dummy.prototype.method=dummymethod
</script>
The key to take away from this example is how easy it is to
attach a property/ method to an object (so it's reflected on all instances
of it)- by using the prototype object of JavaScript.
|
