Rethinking JavaScript Objects

After some thought, I came up with the addProperty() method for the native JavaScript Object:

Object.prototype.addProperty = function (sName, vValue) {  
         
       this[sName] = vValue;  
         
       var sFuncName = sName.charAt(0).toUpperCase() + sName.substring(1, sName.length);  
         
       this["get" + sFuncName] = function () { return this[sName] };  
       this["set" + sFuncName] = function (vNewValue) {  
                       this[sName] = vNewValue;  
       };  
}

This method takes two parameters: sName is the name of the parameter, and vValue is its initial value. The first thing the method does is assign the property to the object, and gives it the initial value of vValue. Next, I create sFunc name to use as part of the getter and setter methods… this simply capitalizes the first letter in the property name so that it will look appropriate next to “get” and “set” (i.e. if the property name is “message”, the methods should be “getMessage” and “setMessage”). The next lines create the getter and setter methods for this object.

This can be used like so:

function ClassA () {  
   this.addProperty(“message”, “Hello world”);  
}  
 
var Test = new ClassA();  
alert(Test.getMessage());    //outputs “Hello world”  
Test.setMessage(“Goodbye world”);  
alert(Test.getMessage());    //outputs “Goodbye world”

Defining properties like this is much easier, but I realized that I might need to get some information from these methods at some point. After all, what if a “set” is not allowed? I could just override the method, but I’d have to do that for every property.

Instead, I opted to create some code that mimics the onpropertychange event of IE. That is, an onpropertychange() method would be defined, and whenever any property of the object changed, this method would be called with an object that described the event. My custom event object, though, has only a few properties:

• propertyName – the name of the property that has been changed
• propertyOldValue – the old value of the property
• propertyNewValue – the new value of the property
• returnValue – true by default, can be set to false in the onpropertychange() method to nullify the change

The code now looks like this:

Object.prototype.addProperty = function (sName, vValue) {  
         
       this[sName] = vValue;  
         
       var sFuncName = sName.charAt(0).toUpperCase() + sName.substring(1, sName.length);  
         
       this["get" + sFuncName] = function () { return this[sName] };  
       this["set" + sFuncName] = function (vNewValue) {  
               var vOldValue = this[“get” + sFuncName]();  
               var oEvent = {    
                       propertyName: sName,    
                       propertyOldValue: vOldValue,    
                       propertyNewValue: vNewValue,    
                       returnValue: true    
                       };  
               this.onpropertychange(oEvent);  
               if (oEvent.returnValue) {  
                       this[sName] = oEvent.propertyNewValue;  
               }  
 
       };  
}  
 
//default onpropertychange() method – does nothing  
Object.prototype.onpropertychange = function (oEvent) {  
       
}

As you can see, only the setter method has been changed. The first thing it does now is get the old value of the property by calling the corresponding getter method. Next, the custom event object is created. Each of the four properties are initialized, and then object is passed to the onpropertychange() method.

By default, the onpropertychange() method does nothing. It is intended to be overridden when new classes are defined. If the custom event object returns from the onpropertychange() method with returnValue still set to true, then the property is updated. If not, the property is not updated, effectively making it a read-only property.