Javascript Objects for Noobs

Well whats this you say, 2 posts in the space of 10 days… yes I have a little blogging fever, and thanks to the newest addition of WordPress making it all the more pleasurable.

Also Thank You to Aaron @ ExtJs for taking the time to read my post on Inline Editing with Ext and offer some friendly advice and feedback. I’ve not got around to trying out his solution yet, but will post (again, yeah, whoop!) when i do.

Alright that last bit was too nerdy all the whooping, I’m starting to sound American… and there goes my audience.

Ok down to business of Javascript Object goodness. This is gonna be brief, as I’m not totally clued up on it yet. I’ve had top force myself to enjoy this stuff as it work forced upon me for work after I took up from a contractor.

Being a season PHP developer I’m used to seeing

class Bla
{
public aMethod(){

}
}
$a = new Bla();

Yes, PHP is great for that, as is C# and Java for all the pre defined class horseyness. Javascript however has no classes. Your objects are objects straight off the bat.

JSON/Object Literals

Firstly what a wanky title object literals, my arse… they’re more like a static class. Sorry to get sweary but they are. When ever you see something like this:

var MyObject = {
aProperty : 'propertyvalue',

getName : function(){

}
}

It means people, that its already 100% an object. Took me a while to get my head around but there’s no need to do

var x = new MyObject();

It can simply be invoked in a static manner (or what we PHP dudes would class as static) thus:

alert(MyObject.getname());

Easy part over..

Proper Javascript objects, ones that you create instances of are created using a function. Now I’ve seen so many crap examples of this its untrue, you teach me nothing sometimes internet…here’s a better one. Well OK its average too I was pushed for time and have rambled enough.

I want to show you how I start out with creating my javascript objects first of all. I used the following template:

var ObjectName = function(config){

// private variables go here.
var _private1 = 'not visible form outside the object.';
var _private2 = '';

// private functions
var _privateFunction = function(){

}

var _init = function(){
// another private function.
}

// public property
this.privelidged = "i'm priveliged";

// privelidged methods here like this.
this.privelidgedMethod = function(){
/**
* this method has access to our private parts of our obejcts so here
* we can do this kinda thing _privateFunction();
*/
}

// any constructor code goes here.
_init();

// you can call private methods here and the ones created with this.methodName
this.privelidgedMethod();
}

This will leave your object interface or API looking like this when instanciated.

So the only callable method is privelidgedMethod not bad eh? Oh and use Aptana too – it rocks.

If you want to make anything truely public you’d add it to the prototype of the object you just created as an Object Literal (yeah wanky name thingy again!).

ObjectName.prototype = {
property : 'value',

render : function (){
// we still have access to our other variables not the private ones tho.
// however if our prvelidged ones call private ones who are we to judge!!
alert(this.privelidged);
}
}

var x = new ObjectName();
x.render();

This is a topic that I could write more about but once again, I’ve bored myself… any problems leave a comment and we’ll have a chat!

This post was written using Zend Studio hahahah