Calling member function from Javascript constructor

Question

I am running into the following issue which has really got me stumped:

I have

function SystemList(UID)
{
  this.refreshData();
}

SystemList.prototype.refreshData = function()
{
  this.systemDataObj({}, $.proxy(this.readSuccess, this));
}

When I try and run this, I get the following error: Uncaught TypeError: Object # has no method 'refreshData' within the constructor.

Anyone have an idea why this is failing? To my eye it looks like it should be working.

Edit:

Example of how I create an instance:

function UserMiniProfile(UID)
{
  this.UID = UID;
  this.systemList = new SystemList(this.UID);
  this.htmlID = 'user-'+this.UID+'-profile';
}

Answer 1

I think you're probably running into the issue of how and when function declarations vs. step-by-step code (what the spec calls statement code) happen.

Code like this will fail in the way you describe, for instance:

var obj = new Thingy("Fred");

function Thingy(name) {
    this.setName(name);
}

Thingy.prototype.setName = function(name) {
    this.name = name;
};

...because you're calling the constructor before adding the setName function to the prototype. Note that calling the constructor before its declaration is just fine, it's just because the constructor is using a function that's set up later by the statement code that there's a problem. The order in which the JavaScript interpreter will try to process that code is:

1. Create the function Thingy and make it available to the scope.
2. Execute the var obj = .... line, calling the constructor.
3. Execute the constructor's code (which in this case throws an exception because there's no this.setName function).
4. Execute the Thingy.prototype.setName = ... line. (If no exception had been thrown in the last step, that is.)

These steps happen for each script block (first the function declarations are done, then the statement code is executed in order), and even though the above example is fairly obvious, when you start putting together pieces from various different locations, you can create this situation less obviously.

The solution, obviously, is to make sure you're not constructing the object before you've set up the setName property:

function Thingy(name) {
    this.setName(name);
}

Thingy.prototype.setName = function(name) {
    this.name = name;
};

var obj = new Thingy("Fred");

...and again, the above is fairly obvious, but it's possible to create these situations rather less obviously in the real world.

My suspicion is that this is what's happening in your case. It's easy to prove: Using a debugger like Firebug on Firefox, VS.Net or the Script Debugger for IE, Chrome's DevTools, etc., put a breakpoint on the SystemList.prototype.refreshData = ... line and a breakpoint on the line where you're doing your new SystemList(...) and see which one executes first.

Here are a couple of fiddles demonstrating the issue: This one fails in the constructor, this one succeeeds.