Question

I’m not a Javascript person normally, but I’ve been diving in, reading Douglas Crockford’s book, and writing some trivial, useful tidbits as Chrome extensions and Node.js (note that this question isn’t about either of them).

Right now, I’m trying to figure out how to retain a reference to an object that’s initiating an AJAX request, that is: once I set the onload event handler (this is from inside a Chrome extension, so I’m using the base XMLHttpRequest object), is there any way that I can refer back to MyObject in the following example:

MyObject.prototype = {
    PerformAction: function() {
        this.Request = new XMLHttpRequest();
        this.Request.open("GET", this.ConstructUrl(), true);
        // From within ActionResultHandler, 'this' will always be the XMLHttpRequest
        this.Request.onload = this.ActionResultHandler,
        this.Request.send(null);
    }
}

Doing this exactly is going to assign this to be the request object itself, and if I simply introduce a wrapper:

this.Request.onload = function() { ActionResultHandler() };

well, that just isn’t going to do anything, because the ActionResultHandler is now out of scope. The reason I’m asking here is because I’ve only found trivial cases of caller manipulation (e.g. manipulating what this refers to from inside a function), but given that OO-ified Javascript and AJAX are literally everywhere, this has to have to be a known, simple issue, but my Google-fu is failing me here. In C#, events are invoked in the context of whoever attaches to them, not the object firing the event, so this doesn’t come up on a daily basis. Perhaps there’s a much better JS pattern that avoids this issue entirely?

Answer 1

It’s not really clear to me which variable you want to hold a reference to. Here’s how you would retain a reference to MyObject in your onload handler:

MyObject.prototype = {
    PerformAction: function() {
        var MyObjectRef = MyObject,
            ActionResultHandler = this.ActionResultHandler;

        this.Request = new XMLHttpRequest();
        this.Request.open("GET", this.ConstructUrl(), true);
        // From within ActionResultHandler, 'this' will always be the XMLHttpRequest
        this.Request.onload = function () {
                ActionResultHandler.apply(MyObjectRef, arguments);
            };
        this.Request.send(null);
    }
}

Edited

Ok, I reread your question again and it seems that you want to execute ActionResultHandler in the context of MyObject, so I tweaked my code to do this.