Question

I am using John Resig’s Simple JavaScript Inheritance and have run into an issue where I am losing what ‘this’ refers to. Using this code:

var Runner = Class.extend({ 
 init: function() {
  this.update();
  if(!this.interval) {
   this.interval = setInterval(this.update, this.period * 1000);
  }
 },
 stop: function() {
  clearInterval(this.interval);
 },
 update: function() {
  this.success()
 },
 success: function(){
 }
});

var SubRunner = Runner.extend({
 update: function() {
  this._super();
 },
 success: function(){
  alert('sub runner success');
 }
});

Running p = new SubRunner() works as I would expect and alerts sub runner success the first time. After the first run through it then tries to run the success function on the wrong ‘this’ (window).

I know Prototype gives you a bind function so that you can pass the context to the function but I haven’t had any luck in doing something similar here. Does anyone have a starting point to figuring this out?

Thanks!

Answer 1

The problem is when you pass this.update to the setInterval function. In Javascript, the “this” depends on wether you call the function using dot notation, and functions will not remember where they came from if you pass them as callbacks or store them in a variable.

You can either add a wrapper function

var that = this;
setTimeout(function(){ that.update() }, this.perios*1000)

or you can use the bind method if its available in your browser (or you can use the similar function in Prototype).

setTimeout(this.update.bind(this), this.period*1000)