Why doesn't this closure have access to the 'this' keyword? - jQuery

Question

I'm a beginner to closures (and Javscript in general), and I can't find a satisfactory explanation as to what's going on in this code:

function myObject(){
    this.myHello = "hello";
    this.myMethod = do_stuff;
}

function do_stuff(){
    var myThis = this;
    $.get('http://example.com', function(){
        alert(this.myHello);
        alert(myThis.myHello);
    });
}

var obj = new myObject;
obj.myMethod();

It will alert 'undefined' and then 'hello'. Obviously this should not be jQuery specific, but this is the simplest form of my original code I could come up with. The closure in do_stuff() has access to the variables in that scope, but apparently this rule does not apply to the this keyword.

Questions:

What happens to this when the closure is passed outside the scope of do_stuff() (in this case $.get())? Does myThis contain a copy of this or a reference to it? Is it generally not a good idea to use this in closures?

Any response much appreciated.

Answer 1

$.get('http://example.com', function(){
    alert(this.myHello);  // this is scoped to the function
    alert(myThis.myHello);  // myThis is 'closed-in'; defined outside
});

note the anonymous function. this in that scope is the scope of the function. myThis is the this of the outer scope, where the myHello has been defined. Check it out in firebug.

'this' always refers to the current scope of execution, i believe. If you want to take the current scope and preserve it, you do what you did, which is assign this to another variable.

Answer 2

What happens to this when the closure is passed outside the scope of do_stuff() (in this case $.get())?

Each function has its own execution context, the this keyword retrieves the value of the current context.

The doStuff identifier and the obj.myMethod property refer to the same function object, but since you are invoking it as a property of an object (obj.myMethod();), the this value inside that function, will refer to obj.

When the Ajax request has succeeded, jQuery will invoke the second function (starting a new execution context), and it will use an object that contains the settings used for the request as the this value of that callback.

Does myThis contain a copy of this or a reference to it?

The myThis identifier will contain a reference to the object that is also referenced by the this value on the outer scope.

Is it generally not a good idea to use this in closures?

If you understand how the this value is handled implicitly, I don't see any problem...

Since you are using jQuery, you might want to check the jQuery.proxy method, is an utility method that can be used to preserve the context of a function, for example:

function myObject(){
    this.myHello = "hello";
    this.myMethod = do_stuff;
}

function do_stuff(){
    $.get('http://example.com', jQuery.proxy(function(){
        alert(this.myHello);
    }, this)); // we are binding the outer this value as the this value inside
}

var obj = new myObject;
obj.myMethod();

See also:

• ‘this’ object can’t be accessed in private JavaScript functions without a hack?

Answer 3

$.get('http://example.com', function(){
   // inside jQuery ajax functions - this == the options used for the ajax call
});

What happens to this when the closure is passed outside the scope of do_stuff() (in this case $.get())?

Nothing "happens" to it, this is still this for that closure, the execution context of the functions called from the closure do not automatically inherit this.

Does myThis contain a copy of this or a reference to it?

All non-scalar assignments are references in JavaScript. So it is a reference to this, if you change properties on either, they change for both.

Is it generally not a good idea to use this in closures?

It is generally a good idea to use this in closures, but if you're going to be using closures inside that need to access the same this, its good practice to do exactly what you did: var someName = this; and then access using someName