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?

Your "definition" of `this` is incomplete. Read https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/this — Rob W, Sep 13 '12 at 16:31
A function's *context* (`this`) is determined *at execution time* and its value [depends on how the function invoked](http://stackoverflow.com/questions/12370851/understanding-javascript-scope-with-var-that-this/12371105#12371105) for that particular execution. The value of `this` in a particular function may change from invocation to invocation, if it is called in a different way (e.g. as an object's method, from `call` or `apply`, etc). — apsillers, Sep 13 '12 at 16:38
@RobW Well, I did find several articles on the internet which use this definition of the keyword, but I suppose that they could be wrong, I'm still wondering about the nested functions part though — Korikulum, Sep 13 '12 at 16:46

Bergi · Accepted Answer · 2015-09-27T12:55:39.533

5

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.

edited Sep 27 '15 at 12:55

answered Sep 13 '12 at 16:39

Bergi

630,263
148
957
1,375

Well, I did find several articles on the internet which use this definition of the keyword, but I suppose that they could be wrong, I'm still wondering about the nested functions part though – Korikulum Sep 13 '12 at 16:48
Yet another case is that it could also be bound as an event listener, which runs with the context set to the target element. – apsillers Sep 13 '12 at 16:49
Yes, I understand all that, but what I would like to know is if a nested function is a method of the call (activation) object of the function it is nested in? – Korikulum Sep 13 '12 at 18:05
No, it is just a function, stored somewhere. The call object of the invoking function does not matter. – Bergi Sep 13 '12 at 18:44

score 3 · Answer 2 · answered Sep 13 '12 at 16:52

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.

function invocation pattern foo()
method invocation pattern o.foo()
constructor invocation pattern new foo
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.

Vivin Paliath · Answer 3 · 2012-09-13T16:41:24.003

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.

While the statement is true, it doesn't hold as an answer to the question. You have to highlight the meaning and role of `this`, before the OP can truly understand what's going wrong. — Rob W, Sep 13 '12 at 16:34

Nested functions & the "this" keyword in JavaScript

3 Answers3

Linked