Prototypes – Coding Friends

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.

<html>
<head>
<script language="javascript">
// a prototype 
  function nameing(elem)
  {
      this.theelem = document.getElementById(elem);
      this.theelem.value = "hi from the parent";
  }
 
  nameing.prototype.getText = function() 
  {
    return this.theelem.value;
  }
 
  nameing.prototype.setText = function(newText)
  {
    this.theelem.value = newText;
  }
 
 
  function start()
  {
  // sets up the link with the 'thewords' id element within the html page
    var name = new nameing('thewords');
    // since the call above will set the 'thewords' to equal "hi from the parent"
    alert(name.getText());
    // now we are setting the text
    name.setText("genux was here");
    // and again outputting the text again
    alert(name.getText());
  }
 
 
</script>
</head>
<body>
  <input id="thewords"/>
  <a onclick="javascript:start()">Click me</a>
</body>
</html>

Leave a Reply