Nested functions & the “this” keyword in JavaScript

Question

"The this keyword always refers to the object that the containing function is a method of."

Great, sounds simple enough, but here's what I'm wondering about...

For example:

function func1() {

  function func2() {
    alert(this == window); // true
  }

  func2();

  alert(this == window); // true
}

func1.func3 = function () {

  alert(this == window); // false
  alert(this == func1); // true

};

func1();
func1.func3();

Now, since func1 is actually a method of the global (window) object (a function object assigned to the property func1 of the global object) it makes sense that this inside func1 refers to the global object, and since func3 is a method of func1's function object it makes sense that this inside func3 refers to func1's function object.

The thing that bothers me is func2. I know that this inside a nested function is also supposed to reference the global object, but I'm not sure why since func2 is NOT a method of the global object. As far as I understand (and this is the part I might be completely wrong about) func2 is a method of func1's call (activation / variable) object. Now, if I'm right about this (and I'm not sure that I am) then shouldn't this inside func2 refer to func1's call object instead of the global object?

So, I guess my question would be: Is a nested function a method of the call (activation) object of the function it is nested in, and if so, shouldn't this refer to that call object instead the global object?

Answer 1

The this keyword always refers to the object that the containing function is a method of.

No. Unfortunately, it is not easy as that. The documentation of the this keyword at MDN gives a good overview. It is set to the object when the function is called as a method on it, but there are other possibilies. The default is that this is undefined when it is called without anything special, like you do with func1 and func2. For sloppy (non-strict) mode functions undefined (and null) are not used though, this does point to the global object (window in browsers) for them in that case - what you are observing.

But it could also point to fresh object instances when the function is called as a constructor (with the new keyword), or to an event target (like a DOM element) when used as a handler. Last, but not least, it could be set manually with call, apply or bind…

this has nothing to do with nesting. Nesting function declarations/expressions only affects the scope ("privacy", availability) of variables. While the variable scope of a function never changes, the value of this can be different on every invocation - it is more like an extra argument.

Answer 2

The meaning of the this keyword inside a function depends on the way the function is invoked. There are 4 different function invocation patterns in JavaScript.

1. function invocation pattern foo()
2. method invocation pattern o.foo()
3. constructor invocation pattern new foo
4. call/apply pattern foo.apply(...) or foo.call(...)

Only in #2 is it the case that this inside the function refers to the object of which the function is a method.

You are invoking func2() with the function invocation pattern. When doing so, this refers to the global object.

As suggested by @Bergi, see https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/this for more detail on the meaning of this and the different function invocation patterns.

Answer 3

but I'm not sure why since func2 is NOT a method of the global object.

Any thing defined inside a function is local to the scope of that function. So func2 belongs to the local scope of func1 and therefore is not attached to window.

In Javascript, the value of this is generally based on how you call the function. When you call a function without any leading object, this is usually set to the global parent object, which is window.

You can explicitly set the value of this in three ways:

myObj.func(a, b); //this set to myObj implicitly because myObj is the parent 

func.call(myObj, a, b); //this set to myObj explicitly; the first argument 
                        //to call sets the value of this for that function

func.apply(myObj, [a, b]); //this set to myObj explicitly; the first argument
                           //to apply also sets the value of this for that
                           //function.

this can be a tricky concept. MDN has a good article about this.