Question

I’m trying to get my head around jQuery and JavaScript objects and functions and grasp how this works and where it points to.

Please can someone explain why this works.

Cat.prototype.meowLater = function() {
    var self = this;
    window.setTimeout(
        function() {
            self.meow();
        }
        , 1000);
}

The bit I’m interested in and confused by is why the variable self can actually be accessed in the anonymous function that’s called by the timer. I thought that because self is declared in another function that it would be local and only accessible to that function.

Answer 1

Inner functions can use variables available to outer functions.

Here,

Cat.prototype.meowLater = function() {
    // I create the variable self that refers to the this (the current object)
    var self = this;

    // I create a timeout that calls the self.meow function within an anonymous function
    /*** NOTE : You don’t always have to create an anonymous function it’s just that in
        this case, it is required ***/
    window.setTimeout(
        function() {
            self.meow();
        }
        , 1000);
}

Since, the setTimeout is inner function of Cat.prototype.meowLater, self available to setTimeout.

Also,

we are not using this.meow() here, because this refers to current object , thus to window in setTimeout function.