Javascript Object Programming

AS we all know that javascript is a language that fully supports object oriented programming. There have already been a lot of articles we can find on internet about this subject, but still I find that a lot of concepts are confusing which bothers me to a degree that I would like to spend some time to investigate a bit more about them.

Here is my two cents of worth. different opinions are very much appreciated.
Q1: How to extend object
The confusing point of this question is there are many ways to extend a class, and what is the difference?
Basically there is only one way to do class inheritance in javascript, it is called prototypal inheritance.

 function superClass() {
    // public property
    this.field1 = "field1";
 }
 // public method, extendable
superClass.prototype.bye = function () {
     return "Bye from superClass";
}

 function subClass() {
   // public field
   this.field4 = "field4";
   //overriding 
   this.bye = function () {
     return "Bye from subClass";
   }
 }

// inheritance
subClass.prototype = new superClass();

 function printSub() {
    var newClass1 = new subClass();
                alert(newClass1.bye());
 }
printSub();

The inheritance is done through prototype property which is quite different from the so called ‘classical inheritance’ in other popular object oriented languages like java and c#, due to this difference, some helper methods were writen to simulate the familiar class extension in javascript, like Base.extend() from Base library, Object.extend() from Prototype library or $.extend from jquery. An example will be given in another blog in ExtJS. A short example is

Ext.extend(Ext.SMS.ExtendedComet1, Ext.SMS.Comet, {
    run: function() { }
});

In it ExtendedComet1 is a subclass of Ext.SMS.Comet

Q1: Difference of constructor and prototype
This is also confusing that you are not sure where to declare fields and methods, in constructor or in prototype, is there any implications on performance, inheritance or visibility of them? my study shows that they do not have any difference, some people think that methods declared in prototype exits once in memory, it sounds like a static method to me if this theory is right, then I did some test of declaring fields in prototype to see if they are static, it turns out to be not the case. so I am not sure about this point, but I do agree that as a good coding practice to declare fields in constructor and method in prototype, as I said in previous section, different libraries do class extension differently, in some cases the base class constructor is not executed, from this angle we do need to declare methods in prototype to make sure it is inherited.

 function superClass() {
      // public property, good practice
      this.field1 = "field1";
      // public method, not good practice
      this.hello = function () {
                    return "Hello from superClass";
      };
  }

   // public field, not good practice
   superClass.prototype.field3 = "field3";

   // public method, extendable, good practice
   superClass.prototype.bye = function () {
                return "Bye from superClass";
   }

Q2:Public, protected, private and static
It is also a rather confusing concept because a lot of examples from internet are given wrong about this, especially of how to make a private member or method. My discovery is:
Declare public member field1 as :

 function superClass() {
     // public property
     this.field1 = "field1";
 }

No issues here, and all prototype members are public as well

The right way to declare private and protected members:

 function superClass() {
     var secretfield = "secretfield";
    this.Setter = function (val) {
         secretfield = val;
    }
    this.Getter = function () {
         return secretfield;
    }
}           

This is the most confusing part, an example given here like this

function Container(param) {
    this.member = param;
    var secret = 3;
    var that = this;
}

says that ‘secret’ and ‘that’ are private, I totally agree with this as they are declared as var, it is controlled by javascript closure, they do not exist out side of constructor, but this ‘private’ is different from ‘private’ from ‘classical’ object point of view , as a private member of a traditional class, you can see the private member within the class, and for a protected member all the inherited classes are able to see, but variables declared ‘var’ as above are no way accessible anywhere outside of constructor. The access to the private members must come through public setters and getters. So from this point of view, javascript private members are not accessible to its class methods or subclasses directly which is different from classic object programming.
The right way to have a static member :

 function superClass() {
    // static 
    field2 = "field2";
}           

In theory it is not recommended to declare variables without ‘var’, but once we understand what it does for field2 it can be of our use, this actually declared a field2 property of global window object, you can check its value from window.field2, therefore it becomes a static field.
Hope this clears javascript object programming a little bit for you.

This entry was posted on Sunday, August 8th, 2010 at 11:38 pm and is filed under Javascript, Software Engineering. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

*