Wednesday, July 25, 2007

Object Oriented? You can't even define classes, can you?

For some reason, unlike other modern languages, the ability to define custom types seems to be a Javascript language feature that is often passed over. Only advanced Javascripters seem to ever get around to learning about this underused feature. Defining a new type in Javascript is easy; you just have to get used to the syntax and understand that in Javascript, everything is an object; Functions are Objects, too.

   1: function Person(fname, lname)
   2: {
   3:     this._fname = fname;
   4:     this._lname = lname;
   5: }
   6: var dave = new Person("Dave", "Haynes");

The code above defines a function called Person which takes two parameters; notice how it assigns the value of the parameters to a pair of expando properties on this. What is this?

First, notice the new keyword used in the assignment to dave. The new keyword basically calls the function in the context of a new object of type Person - this refers to that new object within the scope of the function. The function then adds new expando properties to this object, then the object is assigned to dave. You can consider the Person function to be both the constructor for and the definition of the Person type. Without the new keyword, the expando properties would be added to the global scope and dave would be assigned the return value of the traditional function call. Since the function doesn't have a return statement, it implicitly returns null.


Remember earlier when I said "Functions are Objects, too"? Let's expand the sample a bit...



   1: function Person(fname, lname)
   2: {
   3:     this._fname = fname;
   4:     this._lname = lname;
   5:     
   6:     this.GetFullName = function(){
   7:         return this._fname + " " + this._lname;
   8:     }
   9: }
  10: var dave = new Person("Dave", "Haynes");
  11: alert(dave.GetFullName());

Now we have added a new expando property called GetFullName, but this time it is assigned a function that takes no formal parameters. This demonstrates that a function is an object just like everything else in Javascript. It can be passed around to other functions, stored in variables, garbage collected, etc.

No comments: