{"id":1024,"date":"2010-05-26T10:35:12","date_gmt":"2010-05-26T10:35:12","guid":{"rendered":"http:\/\/www.codingfriends.com\/?p=1024"},"modified":"2010-05-26T10:35:12","modified_gmt":"2010-05-26T10:35:12","slug":"prototypes","status":"publish","type":"post","link":"https:\/\/www.codingfriends.com\/index.php\/2010\/05\/26\/prototypes\/","title":{"rendered":"Prototypes"},"content":{"rendered":"

Prototypes are a great thing with javascript, and they really come into there own with ajax<\/a> and jQuery<\/a>. 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<\/p>\n

\r\n\/\/ variable\r\nanimal.prototype.flyable = false;\r\n\/\/ function\r\nanimal.prototype.canFly = function() {\r\n     return this.flyable;\r\n}\r\n<\/pre>\n
the “this.” means access the variables\/functions within the main type (in this case it would be the animal as the main type).<\/p>\n
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, <\/p>\n
\r\n  function nameing(elem)\r\n  {\r\n      this.theelem = document.getElementById(elem);\r\n      this.theelem.value = \"hi from the parent\";\r\n  }\r\n<\/pre>\n
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.<\/p>\n
  \r\n  nameing.prototype.getText = function() \r\n  {\r\n    return this.theelem.value;\r\n  }<\/pre>\n
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.<\/p>\n
\r\n  \/\/ sets up the link with the 'thewords' id element within the html page\r\n    var name = new nameing('thewords');\r\n<\/pre>\n
it is all very similar to other object languages, where you reference the object itself by using the “this.” syntax.  <\/p>\n
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.<\/p>\n
\r\n\r\n\r\n