Why do I lose the context of this in Javascript?
<p>I have this simple code : </p>

<pre><code>var o = {
    a: 1,
    b: 2,
    f1: function ()
    {
        alert(this.b);
    }
}

var o2 = {
    a: 11,
    b: 22,
    f2: function (j)
    {
        j();
    }
}
</code></pre>

<p>But running this code : </p>

<p><code>o2.f2(o.f1)</code> yields <em>undefined</em>. ( while im expecting "22" as a result)</p>

<p>Now, I know that the context has gone somewhere. and hence If I change the code in <code>o2</code> to : </p>

<pre><code> f2: function (j)
    {
        j.apply(this);
    }
</code></pre>

<p>It does work obviously.</p>

<p>But my question is : </p>

<ul>
<li>In what stage  did i lose the context ? </li>
</ul>

<p>I don't understand : when <code>j()</code> is running , there <strong>is</strong> a <code>b</code> property  in the <code>o2</code> object.</p>

<p>What am I missing ?</p>

<p><strong><a href="http://jsbin.com/olutig/2/edit">jsbin</a></strong></p>
