Function context ("this") in nested functions
<p>When you invoke a top-level function in Javascript, the <em>this</em> keyword inside the function refers to the default object (window if in a browser). My understanding is that it's a special case of invoking the function as method, because by default it is invoked on window (as explained in John Resig's book, Secrets of the JavaScript Ninja, page 49). And indeed both invocations in the following code are identical.</p>

<pre><code>function func() {
  return this;
}

// invoke as a top-level function
console.log(func() === window); // true

// invoke as a method of window
console.log(window.func() === window); // true
</code></pre>

<p>So far so good... Now here is the part I don't understand:</p>

<p>When a function is nested in another function and invoked without specifying an object to invoke on, the <em>this</em> keyword inside the function also refers to window. But the inner function cannot be invoked on window (see code below). </p>

<pre><code>function outerFunc() {
  function innerFunc() {
    return this;
  }

  // invoke without window.* - OK
  console.log(innerFunc() === window); // true

  // invoke on window
  //window.innerFunc(); - error (window has no such method)
  console.log(window.innerFunc) // undefined
}

outerFunc();
</code></pre>

<p>It makes perfect sense that the nested function isn't available on window, as it is after all nested... But then I don't understand why the this keyword refers to window, as if the function was invoked on window. What am I missing here?</p>

<p><strong>EDIT</strong> </p>

<p>Here is a summary of the great answers below and some of my follow up research.</p>

<ul>
<li><p>It is incorrect to say that invoking a function "normally" is the same as invoking it as a method of <em>window</em>. This is only correct if the function is defined globally.</p></li>
<li><p>The function context (the value of the <em>this</em> keyword) does not depend on where / how the function is defined, but on how it is being invoked.</p></li>
<li><p>Assuming that the code is not running in in strict mode, Invoking a function "normally" will have the function context set to to window (when running in a browser, or the corresponding global object in other environments).</p></li>
<li><p>An exception to the above rules is the use of <em>bind</em> to create a function. In this case even if the function is invoked "normally", it could have a context other than <em>window</em>. That is, in this case the context is determined by how you create the function, rather than how you invoke it. Although strictly speaking this isn't accurate, because <em>bind</em> creates a new function that internally invokes the given function using <em>apply</em>. The context of that new function will still be determined by the way it's invoked, but it shields the context of the function it internally invokes by using <em>apply</em>.</p></li>
</ul>

<p>By invoking "normally" I refer to the following simple way of invocation:</p>

<p><code>myFunction();</code></p>

<p>To complete the picture, here is a brief coverage of other ways of invocation and the corresponding context:</p>

<ul>
<li><p>As a property of an object (method) - the context is the object</p></li>
<li><p>Using apply or call - the context is specified explicitly</p></li>
<li><p>With the <em>new</em> operator (as a constructor) - the context is a newly created object</p></li>
</ul>

<p>Feel free to update the above as necessary, for the benefit of people with similar questions. Thanks!</p>
