Create a reference to a method with parameters that uses the same scope - in Javascript

Question

I got some methods ( methA , methB ...) that need to call the same method methMain in Javascript. This method methMain then need to fetch some data and when it is done do a callback to the method that called it (methA or MethB ...).

I can successfully create a pointer/reference to a method by using what is written here: How can I pass a reference to a function, with parameters?

That solution, and all others I have seen, does not seem to work in the current scope. This code will not work:

function TestStructure() {

    this.gotData = false;

    //define functions
    this.methA = function (parA) { };
    this.methB = function (parb) { };
    this.createFunctionPointer = function (func) { };


    this.createFunctionPointer = function (func /*, 0..n args */) {
        var args = Array.prototype.slice.call(arguments, 1);
        return function () {
            var allArguments = args.concat(Array.prototype.slice.call(arguments));
            return func.apply(this, allArguments);
        };
    };

    this.methA = function (parA) {

        alert('gotData: ' + this.gotData + ', parA: ' + parA);

        if (this.gotData == false) {
            var fp = this.createFunctionPointer(this.methA, parA);
            this.methMain(fp);
            return;
        }

        //...do stuff with data
    }

    this.methB = function (parB) {

        alert('gotData: ' + this.gotData + ', parB: ' + parB);

        if (this.gotData == false) {
            var fp = this.createFunctionPointer(this.methB, parB);
            this.methMain(fp);
            return;
        }

        //...do stuff with data
    }

    this.methMain = function (func) {

        //...get some data with ajax

        this.gotData = true;

        //callback to function passed in as parameter
        func();
    }
}

var t = new TestStructure();
t.methA('test');

When methMain do a callback to func ( methA or methB ) the variable this.gotData will not be set.

Is there a solution for this problem or do I need to re-think the design? I want to do this to get data with ajax without blocking with async: false.

Answer 1

I am not 100% sure but I think you can solve your problem by doing

this.createFunctionPointer = function (func /*, 0..n args */) {
    var args = Array.prototype.slice.call(arguments, 1);
    var that = this; //<<< here
    return function () {
        var allArguments = args.concat(Array.prototype.slice.call(arguments));
        return func.apply(that, allArguments);
                   //here ^^^
    };
};

This will cause your partially evaluated function to be called with the same this that created the function pointer. If you want a different scope just change whatever you pass to .apply .