Question

Say I have a set of js that looks like this:

function a() {
this.meow = 0;
    var go = setTimeout(function() {
        this.parent.meow++;
    }, 500);
}

var woof = new a();

Why does woof.meow not increment and if I am referencing it wrong then why does this work:

(function() { 
   this.meow = 'woof'; 
   var go = setTimeout(function() {
      alert(this.parent.meow); 
   },500); 
   return true; 
})();

and even more confusingly then why doesn’t this work:

(function() { 
   this.meow = 0; 
   var go = setTimeout(function() {
      alert(this.parent.meow++); 
   },500); 
   return true; 
})();

Answer 1

parent has no special meaning in JavaScript (although it does on browsers). In your timeout function, this does not refer to your a instance, it refers to the window object. It happens that the window object has a property called parent, but that parent probably doesn’t have a property called meow. The reason this is window in your timeout function is that in JavaScript, this is defined entirely by how functions are called, not where they’re defined. See links below.

Since your timeout function is a closure over the context of the call to new a, you can do this:

function a() {
var self = this;

this.meow = 0;
    var go = setTimeout(function() {
        self.meow++;
    }, 500);
}

What that does is set a variable called self to the value of this within the call to a. The timeout function closes over self and so can use self.meow.

if I am referencing it wrong then why does this work

The code you’ve quoted doesn’t work (live example), but I suspect you saw something similar to it work because in that code, this references the window object, and it’s pretty easy to end up calling a function such that this references window. So meow wold have ended up being a global variable (all properties you put on window are globals).

More on closures and this (on my blog):

• Closures are not complicated
• Mythical methods
• You must remember this