Confusion in using `this` in the context of inner function in Javascript
<p>I have following code</p>

<pre><code>var myObject = {
    foo: "bar",
    func: function() {
        var self = this;
        console.log("outer func:  this.foo = " + this.foo);
        console.log("outer func:  self.foo = " + self.foo);
        (function() {
            console.log("inner func:  this.foo = " + this.foo);
            console.log("inner func:  self.foo = " + self.foo);
        }());
    }
};
myObject.func();
</code></pre>

<p>the out put of the following function is </p>

<pre><code>outer func:  this.foo = bar
outer func:  self.foo = bar
inner func:  this.foo = undefined
inner func:  self.foo = bar
</code></pre>

<p>I have read in Mozilla MDN that the scope of this is its parent Object . So here <code>this</code> and <code>self</code> will return the variable <code>bar</code> but why the one in the inner function returns undefined </p>

<p>Thanks </p>