Object-Oriented JavaScript: A Methodical Step...

[SlightlyLoony]

Yesterday I showed you how to make a very simple JavaScript class, and promised you that next I'd show you how to build the code that calculates a dog's age right into it. Well, that day has arrived, as the famous lass (do you know who she is?) at right is anticipating.

We're going to accomplished this OO miracle by adding an age method to the Dog class. What's a method, you ask? Well, I'm here to answer:

A method is just a function that you can access from an object. It has some special features, most importantly the this object reference, which you've met at least once before (in yesterday's post). Let's look at an example: the Dog class, modified to add an age method. There are several things about this code that are likely new to you.

First note that block of code just after the Dog constructor function. It's setting the property Dog.prototype.age to a function. But what is that property, especially the prototype part? Prototype is a property that's automatically assigned to any constructor function (which, remember, is the class template in JavaScript). It has one very special feature: any properties that the prototype property has are automatically made available to every instance of the class, without actually copying it to each instance. So, in our example, when we define age as a function that's a property of Dog.prototype (and that is what this code does!), we're defining a function that's automatically available to every instance of Dog.

Second, note that within the function definition we make use of the this object reference to get the birth_date property of whatever instance of Dog we happen to call age on. Is your head exploding? Perhaps this will be easier if you see an example of code that uses our new method:

var dog = new Dog('Miki', new Date(2006,1,11));
gs.log('Hey ' + dog.call_name + '!  You\'re ' + dog.age() + ' years old today!');

This is considerably less test code than we had yesterday. Now I don't have to compute the age myself, because the Dog class knows how to do it for me. Just as yesterday, the first line of this code creates an instance of Dog (which is named dog). This instance has the particulars for Miki, the amazing field spaniel you met yesterday.

Now look at the next line: where I needed to print out Miki's age, all I had to write was:

dog.age();

JavaScript interpreted that code by seeing that dog is an instance of Dog, and then seeing that Dog.prototype has a property that matches the name of the function after the ".": age. Then it invoked the Dog.property.age function, which used the code:

this.birth_date

to look up Miki's birth date. And from there it calculated (and returned) his age in years.

Methods sound much more complicated than they really are. Or perhaps I should say that another way: the details of how methods work sounds complicated, but using them is actually quite simple. You define them just as I defined age in the example, and you use them just as I did in today's test code. Just like any other function, methods can have arguments — everything you've learned about functions in previous posts applies to methods as well.

I think that's quite enough for one day, don't you?