Question

Consider the following code:

<script>
    var i = 0;
    function test() {
        var _this = this;
        // foo and _this.foo are set to the same number
        var foo = _this.foo = i++;

        function wtf() {
            console.log(_this.foo, foo);
        }

        $("#thediv").click(wtf);
    };
    test();
    test();
    test();
</script>

It seems that console.log(_this.foo, foo) should always output equal numbers (i).

But clicking the div outputs 3 lines (for each console.log call):

2 0
2 1
2 2

It seems that _this.foo always refers to last this.foo. Why it is so?

Answer 1

When test() is run, this is a reference to window for each of your three test() calls, so you are actually updating window.foo when you assign to _this.foo and referencing window.foo in your console.log.

Then, when wtf() is invoked, the _this variables in each of the wtf() closures are the same – they all point to window

See this jsfiddle: http://jsfiddle.net/8cyHm/

I added some additional parameters to console.log to show what is happening