JavaScript: lexical closure or something else?
<p>Consider this script:</p>

<pre><code>function Obj(prop) {
    this.prop = prop;
}

var NS = {
    strings: ['first','second','third'],
    objs: [],
    f1: function() {
        for (s in this.strings) {
            var obj = new Obj(this.strings[s]);
            obj.f2 = function() {
                alert(obj.prop);
            }
            this.objs.push(obj);
        }
    }
}

NS.f1();
NS.objs[0].f2(); // third
NS.objs[1].f2(); // third
NS.objs[2].f2(); // third
</code></pre>

<p>Not exactly the expected output, however when I update to this:</p>

<pre><code>function Obj(prop) {
    this.prop = prop;
}

var NS = {
    strings: ['first','second','third'],
    objs: [],
    f1: function() {
        for (s in this.strings) {
            var obj = new Obj(this.strings[s]);
            this.wire(obj); // replaces previous function def
            this.objs.push(obj);
        }
    },
    wire: function(obj) {
        obj.f2 = function() {
            alert(obj.prop);
        } // exact same code and function def as the first example
    }
}

NS.f1();
NS.objs[0].f2(); // first
NS.objs[1].f2(); // second
NS.objs[2].f2(); // third
</code></pre>

<p>This seems to work, and I've no idea why. Can anybody enlighten me? Thanks</p>
