Stop holding 'this' in a temp variable

Question

I am continually having to hold this in a temp variable in order to access it in other functions. For example in the two methods below, I am holding this in a that variable:

startTimer: function () {
    var that = this;

    if ($('#defaultCountdown:hidden'))
        $('#defaultCountdown').show('slow');
    shortly = new Date();
    shortly.setSeconds(shortly.getSeconds() + 5);
    $('#defaultCountdown').countdown('change', { until: shortly,
        layout: '<ul id="errorList"><li>Next update in <b>{snn}</b> {desc}</li></ul>',
        description: 'seconds',
        onExpiry: function () {
            that.performUpdate();
        }
    });
},
performUpdate: function () {
    var that = this;

    this.message.fetch({
        success: function () {
            $('#calleesStatuses').html('');
            that.callees.refresh(that.message.get("Callees"));
            $('#defaultCountdown').hide('slow');
            that.startTimer();
        },
        error: function (request, settings) {
            that.killCountDown();
            showErrorMessage(request.responseText)
        }
    });
},

Is there anyway around this or could I possibly use apply?

Answer 1

ECMAScript 5 introduced Function.bind()^[docs], so it is only supported by newer browsers. An alternative implementation can be found in the documentation I linked to. If you include it in your code, you can use bind() in the other (older) browsers too.

It lets you set the object this should refer to in the function. So you could write:

performUpdate: function () {    
    this.message.fetch({
        success: function () {
            $('#calleesStatuses').html('');
            this.callees.refresh(this.message.get("Callees"));
            $('#defaultCountdown').hide('slow');
            this.startTimer();
        }.bind(this),
        error: function (request, settings) {
            this.killCountDown();
            showErrorMessage(request.responseText)
        }.bind(this)
    });
},

Answer 2

I think that's the simplest way to do it. This is what I do (although I'm writing GWT code), to reference the this of the wrapping function in an inner anonymous function.

Even if something like this.wrappingMethod.this were/are possible, storing the the this in a variable named according to your taste is a lot more readable (you could use a more descriptive name, ofcourse), and (still assuming you cold somehow reference the wrapping scope) it will be more robust since you could introduce another level without having to rewrite all the references.