ASP.NET AJAX Inheritance Gotcha

Hello, my name is Manol Donev and I'm part of the ASP.NET team responsible for the development and maintenance of our grid, ajax, calendar, input, and chart components. With time ticking away and the September release date closing down I can assure you there is a lot going on here at the moment -- gradually orienting our ASP.NET product line towards ASP.NET AJAX is by far our main focus of course and probably you will find some of the ASP.NET AJAX tips and tricks I'll be writing about useful in your own projects as well.

OK, this one does not qualify exactly as a tip but it bit me the other day while I was migrating some of our RadInput jsUnit tests so here it is... 

How does ASP.NET AJAX inheritance work? I'm sure it would come as no surprise to those of you who have played a bit with the ASP.NET AJAX framework and JavaScript in general that it relies heavily on the Prototype design pattern -- indeed that's exactly the thing you would expect from a prototypical language like JavaScript, don't you?

Let's get practical -- we'll define a simple inheritance chain of two classes (BaseClass and DeriverClass) where BaseClass defines two methods toString and helloWorld and DerivedClass does not define methods on its own:



 That was fast... let's give it a try then:



I know, I know -- this is one sloppy alert statement but the screenshot looks prettier:



 Here is the equivalent code for the DerivedClass instance as well:



 And the result:



WAIT a minute... what is this [object Object] doing there -- I don't remember overriding the base implementation and certainly I don't remember returning any generic objects at all. Moreover, why is toString behaving like this when the other method works as expected -- just checked their implementations and they seem identical to me.

In order to explain what is going on here, we need to take a deeper look behind the scenes how does ASP.NET AJAX inheritance gets resolved -- in pseudocode the logic would look something like this:

for each member in the prototype of the base class
{
     if the prototype of the derived class does not contain a member with the same name
    {
        add the member to the prototype of the derived class
    }
}

Where is the catch here? The thing is the toString method is inherent to every JavaScript object and returns the object type or the constructor function that created it (if the method is not overriden). So when the conditional checks whether the prototype of the derived class contains a toString member, it evaluates to true as every object already has a default implementation for this method. On the other hand there is no native helloWorld method (wonder which will be the first language to implement it ;)) and the same conditional evaluates to false thus the helloWorld method is added to the prototype of the derived class.

What are our options here? Again it's not pretty, nor very practical for larger inheritance chains but I don't think there is much choice -- you need to explicitly override the toString method in the derived class and invoke the basic implementation:





Voila!

Hope this helps.