Stop saving 'this' in a temporary variable

Question

I constantly have to hold this in the temp variable in order to access it in other functions. For example, in the two methods below, I hold this in the 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) } }); }, 

Anyway, or can I use apply ?

Answer 1

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

It allows you to set the this object, which should reference the function. Therefore you can 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

No, it doesn’t exist. The value of this will differ in closure than in the area defined by closure, so the only way to make it cleaner is to define it at the object level, so at least you only need to do this once for an object that looks as if you are already doing it anyway.

Edit:

Cross out “No, no,” because bind is a valid alternative and there is a comparability implementation (see another answer). Although I personally believe that var self = this; cleaner, and you only need to define it once for one object, but at the moment it is a matter of preference.

Answer 3

I think this is the easiest way to do this. This is what I do (although I write GWT code), referring to this wrapping function in an internal anonymous function.

Even if something like this.wrappingMethod.this was / possible, storing this in a variable named according to your taste is much readable (you could use a more descriptive name, of course) and (still assuming you somehow refer to the packaging area), it will be more reliable, since you could enter a different level without rewriting all the links.

Answer 4

I think this is not comfort, but in fact, if the original this is the only context in which you can perform functions such as startTimer and killCountdown . What I would recommend gives it a more meaningful name, like timer or something else. Indeed, this is just a convenient keyword to refer to the owner of what we are doing, and it should change as the owner changes. If "this / that" becomes difficult to read, the solution is to change the name from that to something more semantically meaningful.

Answer 5

What you do is a standard template in JavaScript, except it's traditional to use self instead of that . But you can use the bind() method as follows:

 onExpiry: performUpdate.bind(this); 

if you are working with a framework that extends the Function prototype to include it, or your Javascript interpreter is fairly recent. ( bind creates the same anonymous function behind the scenes, but is perhaps less effective, as it deals with all kinds of special cases).