5

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();
morgancodes
  • 25,055
  • 38
  • 135
  • 187

4 Answers4

18

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?

Community
  • 1
  • 1
Shog9
  • 156,901
  • 35
  • 231
  • 235
  • Thanks Shog9. So, what's the relationship between "this" and scope/closure? – morgancodes Mar 17 '09 at 14:55
  • Little or none. `this` is scoped to a single function - it isn't inherited into the scope of other functions defined within that function. It's the context object a function is called on, nothing else. – Shog9 Mar 17 '09 at 15:08
  • 1
    Ah, lovely javascript, continuing to reveal her mysteries to me. For years, I've been working on the assumption that "this" is searched for in the scope chain, just like any other variable. Those days are over! – morgancodes Mar 17 '09 at 15:26
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.

Rakesh Pai
  • 26,069
  • 3
  • 25
  • 31
  • In case you didn't know, self is a global that you're overwriting. Check out the value of abc after this: `var abc = function () {return self;}()`. – fncomp Jul 13 '11 at 03:45
1

As a sidenote, "this" isn't necessarily referencing the actual function all the time, since you can invoke a function with a "forced" this-reference, think about an event-handler, in which this will refer to the actual element that fired the event.

using

yourFunction.apply(thisReference, arguments)

you can invoke it where "this" will point to whatever you pass on as first argument.

Carl Manaster
  • 39,912
  • 17
  • 102
  • 155
jishi
  • 24,126
  • 6
  • 49
  • 75
-1

At first glance I'd say it's because the outer 'this' is in reference to MyFunc and the inner 'this' is in reference to innerFunc.

However, Javascript isn't something I have any particular expertise in.

Carter
  • 2,850
  • 9
  • 44
  • 57
  • 1
    Carter, you must be new here... don't bother with the disclaimer! You don't need to have expertise in anything to answer it... look at me for example! ;-) – nickf Mar 16 '09 at 23:06