JavaScript setInterval not being properly bound to correct closure

Question

Problem

Hi people, I\'m reasonably new to JavaScript and I come from the very object-oriented world of Python and Java, that\'s my disclaimer.

There are two ch

Answer 1

When you enter a function, you get a new scope in javascript. You can inherit from the parent scope, but the value of this changes. In coffeescript, you can use the fat arrow (which looks like it is going to be part of ecmascript 6) which basically retains a reference to this before going into the new scope.

class foo
    constructor: (bar) ->
        @bar = bar

    start: () =>
        Meteor.setInterval(@printSomething, 3000)

    printSomething: () =>
        console.log @bar

x = new foo 0
x.start()

The standard way to handle this kind of thing in javascript is to create a reference to this at the point you want to refer to, and then use the reference in your out of scope calls...

function Foo(bar) {

  // make reference to `this` at the point
  // where you want to use it from
  self = this;

  self.bar = bar;

  self.start = function () {
    setInterval(self.printSomething, 3000);
  }

  self.printSomething = function() {
    console.log(self.bar);
  }
}

f = new Foo(5);
f.start();

Answer 2

You could also try creating a closure to capture the this. Like this:

var self = this;
this.start = function () {
    setInterval(function(){
       self.printSomething();
    }, 3000);
}

Answer 3

You lose your context of Foo in the setInterval callback. You can use Function.bind to set the context to something like this to set the context for the callback function reference back to Foo instance.

setInterval(this.printSomething.bind(this), 3000);

With the call

setInterval(this.printSomething, 3000);

The callback method gets the global context (window in case of web or global in case of tenants like node) so you don't get property bar there since this refers to the global context.

Fiddle

or just

 this.printSomething = function() {
     console.log(bar); //you can access bar here since it is not bound to the instance of Foo
  }