Share

From this page you can share Object Oriented JavaScript - Should You use It? - Part 1 to a social bookmarking site or email a link to the page.
Social WebE-mail
Enter multiple addresses on separate lines or separate them with commas.
Object Oriented JavaScript - Should You use It? - Part 1
(Your Name) has forwarded a page to you from Ajaxonomy
(Your Name) thought you would like to see this page from the Ajaxonomy web site.

Object Oriented JavaScript - Should You use It? - Part 1

Tagged:  

This post was part one of a three part series. You can read post two by clicking here and post three by clicking here.

If you have programmed any in JavaScript you are definitely familiar with the procedural method of coding, but you may not have seen many examples of object oriented JavaScript code. Since many JavaScript coders come from a scripting background, most practice a procedural programming style. However, if you have a C++, Java, C#, or any other object oriented programming language (you can program in an object oriented manner in languages such as PHP, however it is often not practiced) you will be interested in seeing how JavaScript object oriented programming differs from these coding languages.

Below is a simple example of a procedural coding style (this particular example just changes the name value of an anchor tag).

function RenameAnchor(anchorname, anchorid){
	document.getElementById(anchorid).name = anchorname;
}

We have all used this coding style many times in our JavaScript. One problem with this is that it will often cause you to copy and paste portions of code into other sections to extend them in different functions. While there is nothing necessarily wrong with this style in some instances there is a better way of coding.

Below is a simple example of an object oriented coding style (once again this particular example just changes the name value of an anchor tag).

var AnchorRename=new Object();
AnchorRename.CreateObject=function(anchorname, anchorid){
	this.anchorid=anchorid; //This is the id of the anchor element
	this.anchorname=anchorname;
	this.RenameAnchor(anchorname, anchorholerid);
};
AnchorRename.CreateObject.prototype={
	RenameAnchor:function(anchorname, anchorid){
		document.getElementById(anchorid).name = anchorname;
	}
};

While the above may at first look like it is just more complicated there are actually practical reasons for using this coding style. The most notible is re-usability. With an object you would create a new object and attach it to a variable name. You would create the new object as in the below code example.

var NewObject = new AnchorRename.RenameAnchor(variable1, variable2);

Now that you have a variable that is attached to the object you can access the object and its properties by referring to the variable, so you can re-use it much easier. Another nice feature of having this in an object is that it can be prototyped in new objects and extend the functionality of the object. While all of this is a little more in depth then I have time for right now I would be happy to answer any questions left in the comments of this post (or you can add me to your buddy list and private message me).

If you come from a C++ or Java background you will probably notice that this differs quite a bit from the object oriented style that you are used to. You will be happy to know that it looks like the next version of JavaScript should be more in-line to what you are used to. I'll be posting more on the new version of JavaScript when we are about to see major implementations of it.

Well, I know I haven't gone into much detail yet, but in my next two posts I will go over how exactly to code in an object oriented style (including different methods to accomplish this) and the how coding might change once ECMAScript 4 is fully adopted by the browsers. For now you can find a good tutorial regarding object oriented programming in JavaScript by clicking here.