JavaScript - this

this [ECMAScript 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 points to the global object (window in browsers) when it is called without anything special, like you do with func1 and func2.

• 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.

The this keyword always points to the object that is calling a particular method, for example:

-------------------------

• The most important thing to understand is that a function object does not have a fixed this value -- the value of this changes depending on how the function is called. 
• We say that a function is invoked with some a particular this value -- the this value is determined at invocation time, not definition time.

• If the function is called as a "raw" function (e.g., just do someFunc()), this will be the global object (window in a browser) (or undefined if the function runs in strict mode).
• If it is called as a method on an object, this will be the calling object.
• If you call a function with call or apply, this is specified as the first argument to call or apply.
• If it is called as an event listener (as it is here), this will be the element that is the target of the event.
• If it is called as a constructor with new, this will be a newly-created object whose prototype is set to the prototype property of the constructor function.
• If the function is the result of a bind operation, the function will always and forever have this set to the first argument of the bind call that produced it. (This is the single exception to the "functions don't have a fixed this" rule -- functions produced by bind actually do have an immutable this.)

var that = this

• Using var that = this; is a way to store the this value at function definition time (rather than function execution time, when this could be anything, depending on how the function was invoked). 
• The solution here is to store the outer value of this in a variable (traditionally called that or self) which is included in the scope of the newly-defined function, because newly-defined functions have access to variables defined in their outer scope.

A this value is a special object which is related with the execution context. Therefore, it may be named as a context object (i.e. an object in which context the execution context is activated).

a this value is a property of the execution context, but not a property of the variable object.

In the global context, a this value is the global object itself