Just when I think I finally understand Javascript scope

Question

I run in to something that illustrates how I clearly don't get it yet.

Can anyone please explain why the value of "this" changes in the following?

var MyFunc = function(){
    alert(this);
    var innerFunc = function(){
        alert(this);
    }
    innerFunc();
};

new MyFunc();

Answer 1

In JavaScript, this represents the context object on which the function was called, not the scope in which it was defined (or the scope in which it was called). For MyFunc, this references the new object being created; but for innerFunc, it references the global object, since no context is specified when innerFunc is called.

This tends to trip up those used to Java or similar OO languages, where this almost always references an instance of the class on which the method being called is defined. Just remember: JavaScript doesn't have methods. Or classes. Just objects and functions.

See also: What is the rationale for the behavior of the ‘this’ keyword in JavaScript?

Answer 2

Just do the following:

var MyFunc = function(){
    var self = this;
    alert(self);
    var innerFunc = function(){
        alert(self);
    }
    innerFunc();
};

new MyFunc();

This way self will always mean this, irrespective of where you're calling it from, which is usually what you want.