We available for hire! — Need help with a web or mobile project?
From yensdesign we develop technology projects based on web apps, mobile apps, consulting and databases. We are young and hard workers, passionate about innovation and focused in new technologies.If you want to ask for a budget, we hare available for hire!.
Extending Javascript classes
October 23rd, 2008
Today I tell you about a Javascript feature that surely many of you already know it, the objects types extension. With this feature you can add methods and properties to classes defined by the user or predefined in the language, and so, resolve the trouble of miss methods in many base classes of Javascript.
To extend a class, you must access to the prototype of the class and add the methods and properties over these. It is more easy if you see a example:
[code="Javascript"]
Number.prototype.isPair = function()
{
return this % 2 == 0;
}
[/code]
In this example, we are adding a new method called ‘isPair()’ to the Numbre class which returns true if the numbre is pair or false if not it is. So , you can use the method as bellow:
[code="Javascript"] var n = 2; alert(n.isPair()); [/code]
How you can view, is very easy add new functionality to the base classes in Javascript. Other good example is to extend the String class with the method trim(), as this is not included by default an it is very useful. The code is the bellow:
[code="Javascript"]
String.prototype.trim = function()
{
return this.replace(/(\s+)/,"").replace(/(\s+)$/,"");
}
var s = “ Hello world! “;
alert(s.trim());
[/code]
Other very useful example, to add the method forEach(callback) to the Array type. Is a method to iterate with all items of the array and executes the callback for each one:
[code="Javascript"]
Array.prototype.forEach = function(callback){
for (i=0; i < this.length; i++) {
callback(this[i]);
}
}
var list = Array(“one”,”two”, “three”);
list.forEach(function(item){ alert(item); });
[/code]
Finally only remember you, as it is logic, you can also extend classes that you have created. In fact, many programmers use this feature to create theirs classes. They create a empty class and add the methods and properties throw extensions (I don`t know the reason, if anyone know it I am grateful that you comment me 
) Suppose the case you want create a class to draw shapes in the screent:
[code="Javascript"]
var Shape = function(color) {
this.color = color;
}
Shape.prototype.draw = function()
{
//CODE
}
Shape.prototype.fill = function()
{
//CODE
}
[/code]
I hope this post can help you in your future javascript development. If you have any suggestion don't doubt in post your comment 
Coding, extending, javascript, prototype, Tips
Coding, Tips
Enjoy this post?
Your vote will help us to grow this website and write more entries like this one :)
We available for hire! — Need help with a web or mobile project?
From yensdesign we develop technology projects based on web apps, mobile apps, consulting and databases. We are young and hard workers, passionate about innovation and focused in new technologies. We try to help you, sharing our knowledge acquired on worked projects, while helping the community and showing our capabilities.If you want to ask for a budget, we hare available for hire! Don't doubt in get in touch with us!.
[...] Posted by n3k0 on 23 Oct 2008 at 01:17 am | Tagged as: programación Leo en el blog de yens un post muy interesante sobre como extender las clases en javascript. [...]
Hi! the content of your posts and the examples you’re explaining are great and so clear… if you don’t know english
.
.
I have to say that many times hurts reading your explanations, with big syntax errors; if you want to catch international readers and eventually more visitors just write in chinese! it would be maybe the same
Good luck practicing javascript (and english as well) !
I don’t know chinese, however i feel that your blog is awesome. keep on the good stuff, i can manage to fix the bad english as i am reading. the more your practice, the better you’ll get.
Thanks for your comment noj! I am trying to improve my english in each post!
Hi, Adrián
I’m Spanish, too. Congratulations for you site. I hope you will improve your English skills (as English teacher suggests) because every skill must be improved. But in this journey, I hope you won’t forget your teachings and communicatings skills because they’re the greatest. Congratulations again, I hope to read more of your articles (sorry for my English…)
[...] Articolo: Extending Javascript classes [...]
[...] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Monday, June 8th, 2009 at 3:56 am and is filed under Javascript Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]
Addictive Online Games…
[...]Extending Javascript classes | yensdesign – Tutorials, Web Design and Coding[...]…