Question

I’m using the FB.Event.subscribe() observer model to find out when a user logs in. This method takes two arguments, a string containing the thing to watch, and callback function.

I’m following several events that handle the event the same way, so I’ve set up the callback function as a pre defined method and passed this to FB.Event.subscribe() like this:

Controller.prototype.go = function() {
    FB.Event.subscribe('auth.login', this.fbHandleStatusChange);
    FB.Event.subscribe('auth.logout', this.fbHandleStatusChange);
}

Controller.prototype.fbHandleStatusChange = function(response) {
    // Doesn't work
    this.otherFunction();
}

Controller.prototype.otherFunction = function() {
    alert('hello');
}

Unfortunately this means that I loose access to ‘this’ within the scope of fbHandleStatusChange, obviously I don’t want to start coding references to concrete versions of Controller!

I’m guessing I’m passing the function incorrectly?

Thanks.

Answer 1

In JavaScript, this is defined entirely by how a function is called, not where it’s defined. This is different than some other languages. (JavaScript doesn’t have methods, it just has functions and some syntactic sugar that makes them look like methods sometimes.) So although you’re passing in your function correctly, Facebook doesn’t know about your object instance and can’t set this correctly when calling your function.

Check the FB.Event.subscribe docs to see if it offers a way to say what “context” to use to call the event handler function. It may offer a way to do that. (This will usually be a context or thisArg parameter.)

If not, you can readily solve the problem with a closure:

Controller.prototype.go = function() {
    var self = this;

    FB.Event.subscribe('auth.login', handleChange);
    FB.Event.subscribe('auth.logout', handleChange);
    function handleChange() {
        return self.fbHandleStatusChange();
    }
}

That grabs a copy of this into a variable called self, which is used by the handleChange function (which is a closure over the scope containing the self variable) to call your function with the correct context. More about closures here: Closures are not complicated More about this here: You must remember this

Alternately, though, are you really going to have multiple instances of Controller? People coming to JavaScript from class-based languages tend to use constructor functions (a rough “class” analogue) unnecessarily. They’re the right choice if you need to have more than one instance of an object, but if you’re only ever going to have a single Controller object on the page, then using a constructor function and fiddling about with this is overkill.

If you don’t need multiple, independent Controller instances, then:

var controllerObject = (function() {
    var inst = {};

    inst.go = go; // Make `go` a publicly-accessible function of the object
    function go() {
        FB.Event.subscribe('auth.login', fbHandleStatusChange);
        FB.Event.subscribe('auth.logout', fbHandleStatusChange);
    }

    // This is private to us, so we don't expose it as a property on the object
    function fbHandleStatusChange(response) {
        // Doesn't work
        otherFunction();
    }

    // This is also private to us
    function otherFunction() {
        alert('hello');
    }

    return inst;
})();

That creates a private scope via the outer anonymous function, and within that scope creates an instance (inst) which we then return and refer to as controllerObject. controllerObject in the above only has one property, the function go. All of our other functions are truly private. (I’ve also taken the liberty of ensuring that the functions have names, because that helps your tools help you.)

Note that we don’t actually refer to inst anywhere in our function calls, because they’re all local to the closure scope. We can even have private data, by having other vars within the outer closure.