Prototypes are a great thing with javascript, and they really come into there own with ajax and jQuery. A prototype basically it extends the present functional aspects. So lets say that you have a basic shape of animal (legs, head etc) and then you want to extend that basic shape with the option if the animal can fly then you can write a prototype to extend that, the prototype can either be a function or a variable so for example
// variable
animal.prototype.flyable = false;
// function
animal.prototype.canFly = function() {
return this.flyable;
}
the “this.” means access the variables/functions within the main type (in this case it would be the animal as the main type).
in the example I am just altering some text within a HTML input tag, to start with I am creating a function (that I will extend later) and create a local (this.) variable that points to the element passed by using the document object, afterwards set the value equal to “hi from the parent”. I called it the parent because it is the main type,
function nameing(elem)
{
this.theelem = document.getElementById(elem);
this.theelem.value = "hi from the parent";
}
then to extend this type, you start with the typename.prototype.extension_name, so the examples below will either return the value from the document element value that was setup in the “parent” / main type, and also the setText function will set the text to the document element.
nameing.prototype.getText = function()
{
return this.theelem.value;
}
this is how I set up the object by calling new on the main type with passing in the element that I want to link to the object.
// sets up the link with the 'thewords' id element within the html page
var name = new nameing('thewords');
it is all very similar to other object languages, where you reference the object itself by using the “this.” syntax.
Below is the full html code that you can copy-paste into your favourite text editor and then open up in a web browser to see what you think.
Click me