Tuesday 15 July 2008

Getting intimate with Javascript objects part #6 - Super and Sub Classes

Okey Dokey Gentle reader - Most OO languages have an explicit concept of hierarchy within their classes. Every class can have a SUPERCLASS from which it inherits its properties and methods. Also any class can be extended or Subclassed so that the resulting SUBCLASS inherits its behaviour.

In Javascript right at the top of the object hierarchy is the Object class, all other classes both supplied and created by you the programmer are subclasses of the Object class. Or if you prefer it arse about face the Object class is the Superclass of all other objects. All classes inherit a few basic methods from the Object superclass.

Back in the Inheritance post I pointed out who object s inherit properties from the prototype object of their constructor so how can they also inherit from the Object class? A good question! Remeber the prototype is an object itself which was created from the Object class and from there it inherited the Object Class methods.

Now as was mentioned in a comment by Tim Tripcony back here The generally accepted syntax to create an empty object is now simply to = {} and [], respectively and there is no need to specify new Object(). This kinda hides the relationship from your objects to the Object() class but it is there none the less.

Ok a wee word of caution about property and method names. When a property is looked for or a method is called Javascript will look in current object first and then work its way up the inheritance "tree" searching the Object Class last, if the property or method is not found you will get an error BUT if the first property found will be the one the code uses! This in effect hides properties and methods of the same name (and case) further up the inheritance tree.

Generally Javascript does not need really complex class structures but it is possible to subclass any class. For example say we want to create a subclass of GirlFirend() called GirlFriendSize() we would do it like this first define the GirlFriendSize class

function GirlFriendSize(chest,waist,hips)
this.chest = chest;
this.waist = waist;
this.hips = hips;

Then we force its prototype to be a GirlFriend object which means that any instance of this class we create will inherit all of the properties and methods from the GirlFriend class (and for those eagle eyed amongst you the Object class as well)

GirldFriendSize.prototype = new GirlFriend()

Now we can if we wish add new methods and properties to this subclass as described in previous posts. Now if we follow this code with a

var myGirlFriend = new GirlFriendSize(36,24,36);

Since the GirlFriend class as described yesterday is

function GirlFriend()
{this.hair = "blonde";}
GirlFriend.gender = "Female";
GirlFriend.prototype.kiss = { return "Muahhhhhhhhh" };
GirlFirend.compare(gfa,gfb) {
if (gfa.hair == "blonde")

alert("Girlfriend A is a Blonde Bombshell")
if (gfb.hair == "blonde")
alert("Girlfriend B is a Blonde Bombshell")

The myGirlFirend instance has inherited all of the above (with the exception of the class variable which is global).

Subtle problem time ... since GirlFriendSize.prototype points at an object of our own creation we have overwritten the prototype object provided by javascript.

"So what?" i hear you ask, well the constructor property get all snafu'ed. The constructor property is one of those things inherited from the Object superclass. This property holds the constructor function that created the object, which is not as you might expect GirlFriendSize but is GirlFriend. Now it depends if you are going to use the constructor property in your code as to whether you need to correct this. For completeness this "wrinkle" can be got around by setting constructor explicitly like this

GirlFriendSize.prototype.constructor = GirlFriendSize;

Oh a word of warning you can't do this with Javascript 1.1 co the constructor property is read-only ... b**tard!

Tomorrow a much more exciting and very useful (well for me anyway) Associative Arrays ... yummy!

Disqus for Domi-No-Yes-Maybe