JavaScript

25-Aug-11 6:09

I'm not a habitual user of JavaScript, but I have a particular need for it right now, so maybe my problem is due to some fundamental misunderstanding of how JavaScript is supposed to work and my expectation that it'll work somewhat like the C# I'm familiar with. Anyway, I have a class (or object prototype or whatever the correct term in JavaScript is supposed to be) that looks something like this:

JavaScript

function MyClass() {

    //....

    this.OnTimerStart = function() {
        // Do some stuff
    };

    MyClass.prototype.StartTimer = function() {
        if (this.OnTimerStart != null) {
            this.OnTimerStart();
        }
    }
}

Now when I use it, I create an object like so:

JavaScript

var myObj = new MyClass();

Now here's my problem, in the StartTimer function this.OnTimerStart returns undefined (so the != null comparison is always false and the function doesn't get called), but myObj.OnTimerStart is defined and can be executed (directly running myObj.OnTimerStart() works). So why doesn't the prototype method StartTimer seem to know what "this" is? At least in the case when a variable is a function (it doesn't seem to have a problem when a variable is just a string or an int for example). What am I not understanding here?
(Note: tested in IE8, I have other problems with Firefox at the moment which may or may not be related)

Edit: fixed typo in StartTimer

modified on Thursday, August 25, 2011 1:40 PM

Graham Breach25-Aug-11 6:34

Graham Breach

25-Aug-11 6:34

Try replacing

MyClass.prototype.StartTimer() {

with

MyClass.prototype.StartTimer = function() {

Wjousts25-Aug-11 7:40

25-Aug-11 7:40

Actually, that was a typo on my part when posting. I think the actual problem I'm having is more complicated that my simple example showed. The way StartTimer get called is from the callback to a jQuery getJSON:

JavaScript

MyClass.prototype.MyFunction = function () {
    $.getJSON(this.url + "/MyFunction?callback=?", function (data) {
        MyClass.prototype.ErrorChecker(data, function (data) {
            MyClass.prototype.StartTimer();
        });
    });
}

ErrorChecker is a function I use to check for a particular returned value that indicates an error occurred with my web service which then calls the passed in function (i.e. StartTimer) if there is no error. I thought the problem might be because I did MyClass.prototype, but changing it for this.StartTimer() (and/or this.ErrorChecker) doesn't work either and causes an error within jQuery. I guess somewhere within the callback infrastructure you lose the identity of "this". I guess I could change so that both methods (ErrorChecker and StartTimer) accept an extra argument which I can pass "this" in to. I'll give it a try.

AspDotNetDev25-Aug-11 7:45

25-Aug-11 7:45

Try this:

JavaScript

MyClass.prototype.MyFunction = function () {
    var instance = this;
    $.getJSON(instance.url + "/MyFunction?callback=?", function (data) {
        instance.ErrorChecker(data, function (data) {
           instance.StartTimer();
        });
    });
}

Martin Fowler wrote:
Any fool can write code that a computer can understand. Good programmers write code that humans can understand.

Wjousts25-Aug-11 8:06

25-Aug-11 8:06

jQuery still chokes on it. Is there a difference between instance and this?

AspDotNetDev25-Aug-11 8:11

25-Aug-11 8:11

"this" is a keyword. "instance" is just what I named that variable. You could rename "instance" to "donkey" and it would act the same. What my changes are supposed to do are capture the value returned from "this" and store it in the "instance" variable so you can use it in nested functions where "this" changes. I'm not sure why it still chokes. Try replacing the line that chokes with alert("test").

Martin Fowler wrote:
Any fool can write code that a computer can understand. Good programmers write code that humans can understand.

Wjousts25-Aug-11 8:18

25-Aug-11 8:18

Whoops!

I completely missed that part. I thought instance was some JavaScript keyword I didn't know about (it's been a long time since I last did any significant JavaScript). Just tried it and it seems to work now. Copying this to a local variable solves the problem.

Thank you very much. I've been banging my head on my desk all morning.

AspDotNetDev25-Aug-11 7:19

25-Aug-11 7:19

In addition to what Graham said, you don't need to put prototype functions in the constructor. You can do this instead:

JavaScript

function MyClass() {
  this.OnTimerStart = function() {
    alert("started");
  };
}
MyClass.prototype.StartTimer = function() {
  if (this.OnTimerStart) {
    this.OnTimerStart();
  }
}
var instance = new MyClass();
instance.StartTimer();

Martin Fowler wrote:
Any fool can write code that a computer can understand. Good programmers write code that humans can understand.

Wjousts25-Aug-11 7:43

25-Aug-11 7:43

Is there a reason for doing it that way versus what I was doing? I can't help my strong desire to wrap a "class" in curly brackets (i.e. the C# way) which I think was why I naturally did it that way.

AspDotNetDev25-Aug-11 7:47

25-Aug-11 7:47

Your way, the function would be created each time the class constructor is called. My way, it is created once. Doing it your way would be in C# like creating a delegate rather than a function and reassigning the delegate each time the constructor is called. Basically, it's an unnecessary performance hit.

Martin Fowler wrote:
Any fool can write code that a computer can understand. Good programmers write code that humans can understand.

Wjousts25-Aug-11 7:58