HTML5, CSS3, jQuery, JSON, Responsive Design...

JavaScript Classes and Objects from a Domino Perspective - Part 1: Classes, properties and methods

Michael Brown   September 24 2009 04:16:01 AM
If you thought that IBM's implementation of Object-oriented programming in LotusScript was - how can I put this politely? - half-arsed, then you're in for a shock when you try OO in JavaScript!  You see, JavaScript doesn't have classes at all.  And yet, it's still object-oriented.

Confused?  Me too, but I'm getting there... I think.

Simple Class and Object In LotusScript

Here's a definition of a simple Person class in LotusScript:
' Class definition
Public class Person
   public m_First as string ' naughty public class variables
   public m_Last as string

   sub new(first, last)
           me.m_First = first
           me.m_Last = last
   end sub
End Class

In the interests of simplicity, I've declared the class variables as Public when I should, of course, have declared them as Private and then created some setter and getter methods.  In LotusScript, the Class Constructor is always called "sub new".  Class variables are usually referred to via the "me." operator, although this is not mandatory.  By convention, LotusScript class variable names are prefixed with "m_" although again, this is not mandatory.

Here's how you might create an object of of the Person Class:
'' sample object creation
dim personObj as New Person("Donald", "Duck")

Here's how the personObj object looks in the LotusScript debugger:
Object in LS debugger


You can see how m_First and m_Last are properties of personObj.

Simple Class and Object in JavaScript

Now here's a definition of the same Person class in JavaScript:
// "Class" definition (actually an Object itself)
function Person(first, last) {
   this.first = first;
   this.last  = last;
}

It looks like an ordinary JavaScript function, because that's pretty much what it is.  There are no classes in JavaScript.  Instead, you can create class-like objects and then create other objects (object-like objects, if you like) from them.

There is no separate Constructor definition like you have in LotusScript, Java and just about every other OO language.  In JavaScript, the class-like function declaration isthe Constructor.  More on this later.

Here's how you might create an object of of the Person Class.  As you can see, it's almost identical to how you'd do in in LotusScript:

//Sample object creation
var personObj = new Person("Mickey", "Mouse");

And here's how the personObj object looks in the Firebug debugger extension for Firefox:

Object in Firebug debugger


Again, you can see how First and Last are properties of personObj.  But what you might also notice, further down the screenshot, is the presence of the Person Class itself.  That's because Person is an Object in its own right, although we have defined it and are using it as a kind of class.  Note how Firebug shows Person as a prototype object.

So far, so simple.  Now it's going to get a bit strange.


Methods in LotusScript Classes

Let's add the FullName method to the LotusScript Person class:
Public Class Person
   Public m_First As String
   Public m_Last As String

   Sub new(first, last)
           m_First = first
           m_Last = last
   End Sub

   Public Property Get FullName As String
     FullName = Me.m_First & " " & Me.m_Last
   End Property
End Class


Here's how you can call the FullName method:
Dim personObj As New Person("Donald", "Duck")
MessageBox personObj.FullName


This call would show "Donald Duck" on a dialog.

Here's how the FullName method appears in the LotusScript debugger:
Object in LS debugger


I.e., it doesn't!  Methods don't show in the LotusScript debugger (boo, hiss).  You can only see variables there.

Methods in JavaScript Classes

Let's add the FullName methods to the LotusScript Person class:
// "Class" definition

function Person(first, last) {
   this.first = first;
   this.last  = last;
}

Person.prototype.FullName = function() {
   return this.first  + ' ' + this.last;
}


There's a couple of big differences here.  First off, the method is not added to the class object directly.  Instead, it's added to its prototype object.  This allows all instances of the Person class/object to automatically pick up the method.  But what is the prototype object, exactly?  Here's the definition in JavaScript: the Definitive Guide:

Every object has a prototype; an object inherits all of the properties of its prototype.  This means that all of the properties of the prototype object appear to be properties of the objects that inherit them.


Got it, now?  No, me neither.  But this is how you do it in JavaScript, so there!

The second difference that you might have noticed is that the method definition is actually outside of the class-object definition!  Yes, you can add properties and methods to JavaScript objects at any time, by declaring them pretty much anywhere you like.  For readability sake, it's best to group them all together though.  Notes: you can, if you wish, declare methods inside the function/class definition and it will work... up to a point.  However, when I did that I ran into problems when dealing with inheritance.  (I cover inheritance in Part 2 of this series).

Here's how you can call the FullName method:
var personObj = new Person("Mickey", "Mouse");
alert(personObj.FullName());


This would show "Mickey Mouse" in a dialog.

Unlike the LotusScript debugger, the Firebug debugger in Firefox shows functions/methods as well as properties.  Note how the new FullName method is part of both the personObj object and the Person object/class:

Object in Firebug debugger



In part 2, I'll cover inheritance.


Sources:

This entire post is, essentially, a rewrite of this post on Kevin Lindsey's blog, so all credit to him:
http://www.kevlindev.com/tutorials/javascript/inheritance/inheritance10.htm

The bible.  Just buy it! If you're in Australia, this book will set you back over $100 Oz in the likes of Dymocks.  And just look at how much it is on Amazon.  Rip-off Australia, as usual.
Javascript: the Definitive Guide by David Flanagan
Comments

1steve Thomas  09/25/2009 10:48:30 PM  JavaScript Classes and Objects from a Domino Perspective - Part 1: Classes, properties and methods

Why would it be surprising that JavaScript is OBJECT oriented because it doesn't have classes but instead has OBJECTS?

2Mike Brown  09/25/2009 11:16:24 PM  JavaScript Classes and Objects from a Domino Perspective - Part 1: Classes, properties and methods

Because in most other OO programming languages you use classes to create objects.

About