Question

In the following code snippet, ‘this.x()’ can only be called in case 2 (see main()).
Also Bar unequals this in case 1, but is equal for case 2.

function Class_Bar() {
    this.panel = null;
    this.init = function () {
        // do some stuff
        this.panel = 20;
    }
    this.apply = function () {
        alert(Bar == this);
        Bar.x();
        this.x();
    }
    this.x = function() {
        alert("Some friendly message");
        alert(Bar.panel);
    }
}

var Bar = new Class_Bar();

function Class_Factory() {
    this.factories = new Array();
    this.add = function (init, apply) {
        this.factories.push({"init":init, "apply":apply});
    }
    this.init = function () {
        for (var i = 0; i < this.factories.length; ++i) {
            this.factories[i]["init"]();
        }
    }
    this.apply = function () {
        for (var i = 0; i < this.factories.length; ++i) {
            this.factories[i]["apply"]();
        }
    }
}

var Factory = new Class_Factory();

function main() {
    // Case 1
    Factory.add(Bar.init, Bar.apply);

    Factory.init();
    Factory.apply();

    // Case 2
    Bar.init();
    Bar.apply();
}

main();

http://pastebin.com/fpjPNphx

Any ideas how to “fix” / workaround this behaviour?

I found a possible solution, but it seems to be a “bad” hack.: Javascript: How to access object member from event callback function

Answer 1

By passing Bar.init, you’re really only passing the function but not the information that it belongs to Bar (i.e. what the this value should be). What you can do is binding that information:

Factory.add(Bar.init.bind(Bar), Bar.apply.bind(Bar));