1

I'm trying to make a recursive method but it is losing its binding to this. Here is the simplest way to recreate my issue:

var Foo = function() {
    return {
        foo : 'foo',
        bar : function() {
            co​nsole.log(this.foo);
            setTimeout(this.bar, 500);
        }
    }​;
}
var foo = new Foo();
foo.bar();​

That will only run twice. The first time it will log foo to the console, and the second it will log undefined. Then of course, it won't run anymore because bar is no longer a property of this since I assume it was reset to the global object.

I tried var that = this in my bar method and referencing that.foo and that.bar but it doesn't change anything. I also tried var that = this above my return statement and the issue persists.

Expected result:

foo

foo

foo

foo

... and so on

Here is an example http://jsfiddle.net/k2hTJ/ which results in this:

foo

undefined

4
  • Because this is overriden in the scope of the function. Dec 28, 2012 at 22:46
  • 1
    We should come up with a name for the that = this, self = this conundrum that seems to haunt javascript developers on a daily basis.
    – Travis J
    Dec 28, 2012 at 22:47
  • From the way your code looks, I deduce that you're well on your way to learning about the module pattern. Fantastic, but if you don't mind my being pedantic: in this case, a prototype method might be more suitable, because now you're creating a new function object for each new instance... all bar properties are separate objects that do exactly the same thing. That's not ideal. If you don't want to augment the proptotype, a closure will do just as well of course Dec 28, 2012 at 22:54
  • Can you post a fiddle of the above code using the module pattern for me?
    – Maverick
    Dec 28, 2012 at 22:55

3 Answers 3

5

setTimeout will call its function in the current scope, but with this as the global object.

The best way to work around this is to do something like:

var that = this;
setTimeout(function() {that.bar.apply(that);},500);
5
  • @Alexander inside the anonymous function this scope has changed
    – Ibu
    Dec 28, 2012 at 22:55
  • AH Thank you! I read about call and apply the other day and must have been too overwhelmed to remember it.
    – Maverick
    Dec 28, 2012 at 22:56
  • @Ibu, Elias Van Ootegem, you better read again. There's no logic in the anonymous function
    – Alexander
    Dec 28, 2012 at 22:57
  • @ibu: That doesn't matter: that.bar() calls the function object, referenced by bar in the context of that, whatever this references in the anonymous function is irrelevant. If it did matter, then someObject.bar() in the global scope would meant that this would point to the global object here, too (which it doesn't) Dec 28, 2012 at 22:57
  • @Alexander: Sure there is... the apply is not required IMO, but it's not harmful either. I was wrong about omitting the parentheses (thinking about Nick's answer there) Dec 28, 2012 at 22:59
0

This works:

var Foo = function() {
    return {
        foo : 'foo',
        bar : function() {
            co​nsole.log(this.foo);
            setTimeout(this.bar(), 500); //Add '()'
        }
    }​;
}
var foo = new Foo();
foo.bar();​
2
  • 2
    It might well work, but it doesn't do the same thing: this calls the return value of the method after half a second, not the method itself Dec 28, 2012 at 22:50
  • 2
    Congratulations. You just created an infinite loop!
    – Alexander
    Dec 28, 2012 at 22:51
0
foo = {
    foo: 'bar',
    bar: function() {
        console.log(foo.foo);
        setTimeout(foo.bar, 500);
    }
};
foo.bar();​

This will also do the trick.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.