javascript class - this.method called with setInterval

Question

I have a JavaScript class

function MyClass() {

  MyClass.prototype.fooMethod = function () {
    // some logic goes here...
  }

  MyClass.prototype.fooMethod2 = function () {
    this.fooMethod();
  }
}

Everything works as expected when I call like this:

var m = MyClass();
m.fooMethod2();

However when I have this code called by setInterval I get an error: "Uncaught TypeError: Object [object DOMWindow] has no method 'fooMethod'"

var m = MyClass();
var intervalId = setInterval(m.fooMethod2, 100);

Is there any way I can use setInverval to call my method?

@Alex Wayne is correct, but to help enlighten you as to why, you may want to read http://stackoverflow.com/questions/133973/how-does-this-keyword-work-within-a-javascript-object-literal — Matt, Apr 12 '12 at 18:20

Alex Wayne · Accepted Answer · 2012-04-12T18:25:06.297

setInterval(function() {
  m.fooMethod2();
}, 100);

In javascript, context (the value of this) is set by how the method is invoked. So foo.bar() will set this to foo inside the bar function.

But when you return a a reference to a function to be run by something else, context is not preserved. Check this out:

var callLater = function(fn) {
  setTimeout(function() {
    fn(); // no defined context, `this` will revert to the default: `window` 
  }, 1000);
};
callLater(foo.bar);

In this snippet, we pass a function into the callLater function. But when we invoke fn() we do it without any receiver, meaning we lose context.

So anytime function context is important, you have to pass in an anonymous function that will call the method on an object explicitly.

Yeah I wasn't familiar with how to preserve the context, still somewhat new to javascript. Thanks — Tony Ranieri, Apr 12 '12 at 18:23

score 1 · Answer 2 · answered Apr 12 '12 at 18:16

1

var m = new MyClass();
var intervalId = setInterval(function(){m.fooMethod2();}, 100);

Always use the new keyword when referencing an object, or you'll wind up with unexpected errors.

answered Apr 12 '12 at 18:16

Elliot Bonneville

51,872
23
96
123

Jeez! How did I not spot that! Good catch! – gideon Apr 12 '12 at 18:18

score 0 · Answer 3 · answered Dec 21 '15 at 12:34

Pass context as parameter. Then all will works perfectly.

module.exports = {
   lobby = [],
   init: function () {
      var parent = this;
      setInterval(function () {
        ref.everySecondTick(parent);
      }, 2000);
   },
   everySecondTick: function (parent) {
        console.log(parent.lobby.length);
   }
}

javascript class - this.method called with setInterval

3 Answers3