Prototypes

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