Maintaining Scope

Question

I have a general question about maintaining the scope of this in an object. Here's a simplified snippet of code. Take note of the var that = this line and inside the event handler where I call that.showMenu().

var MyObj = {
    init : function(target){
        this.$Target = $(target);
        this.$Menu = $(target).find('.menu');
        this.eventBindings();
    },
    eventBindings : function(){
        var that = this;
        this.$Target.on('click', '.anchor', function(e){
            e.preventDefault();
            that.showMenu();
            //some other code
        });
    },
    showMenu : function(){
        this.$Menu.show();
    }
};
MyObj.init('.myTarget')

Code should be somewhat self explanatory. Typically I try to create reusable methods outside of my eventBindings(). The problem I continually run into is passing through this which would refer to MyObj into the event handler so I can call this.showMenu().

To overcome the obstacle I always assign this to a variable called that so when I'm further down the scope I have a reference. But I feel like this can't be the best method... can someone suggest a better alternative?

Answer 1

What you are doing is the best method. In Javascript this is scoped dynamically (binding depends on stack, that is on the place from where the function was called), all the other variables - are scoped statically (binding depends on static placement of variable in your code).

And since Javascript treats this in a special way, don't feel bad about treating it in a special way too.

You could encapsulate what you are doing now in a function - many libraries provide such a facility, it is usually called "bind". But this will not change what really happens, only hide it (and use up some resources while doing this). Such function could look a bit like:

function whatever (functionToProcess, thisToFreeze) { 
   return function() {
       functionToProcess.apply(thisToFreeze, arguments); // apply is built in
   }
}