Question

Im a bit of a beginner when it comes to javascript constructs. Im trying in jquery, but not with much success. The following is a reduces version of my code:

var field1 = {
        fieldId:"#field1",
        field:"",
        init:function(){
            this.field = this;
            $.ajax({
                type:"GET",
                url:'some/url/to/get/values/from',
                cache:false,
                success: function(data){
                    alert(field.fieldId);
                }
            }); 
        }
};
field1.init();

Basically i want to be able to print out field.fieldid inside the success event but i end up with something most definetly not expected. I would hate having to write field1.field.fieldid everytime also since that would ruin when i figure out how to use extends and similar things.

Can anyone help me get “#field1” out when i do the alert(field.fieldId) ?

Answer 1

This is a classic case of You must remember this. The simplest answer in your case is a local variable in your init function:

var field1 = {
        fieldId:"#field1",
        field:"",
        init:function(){
            var self = this;                      // <=== change here
            $.ajax({
                type:"GET",
                url:'some/url/to/get/values/from',
                    cache:false,
                success: function(data){
                    alert(self.fieldId);          // <=== and here
                }
            }); 
        }
};
field1.init();

Or alternately, use the context argument of the ajax function:

var field1 = {
        fieldId:"#field1",
        field:"",
        init:function(){
                                                  // <=== change here (no `this.field = this;`)
            $.ajax({
                type:"GET",
                url:'some/url/to/get/values/from',
                cache:false,
                context: this,                    // <=== and here
                success: function(data){
                    alert(this.fieldId);          // <=== and here
                }
            }); 
        }
};
field1.init();

Basically, in JavaScript, the value of this during a function call is defined entirely by how a function is called, not where it’s defined as in some other languages (C++, Java, C#, …). When jQuery calls the success callback of the ajax function, it has to set this to something. By default, it sets it to an object representing the settings of the ajax call, but using context you can tell jQuery to set it to something else, allowing you to use this within the callback to mean the same thing as this when you call ajax.

The first solution takes advantage of the fact that the success callback is a closure over the context of the call to init (don’t worry, closures are not complicated), and so by creating a variable (self) and giving it the value of this, we can reliably refer to the object via self within the closure (the success callback).

---

Ways in which this is set in JavaScript:

1. When you call a function by getting the function reference from an object property as part of the same expression as the call, this within the function call will be the object from which you got the property. So given:

   var obj = {
       firstName: "Fred",
       speak: function(msg) {
           alert(this.firstName + " says " + msg);
       }
   };
   

   then

   obj.speak("hi");   // alerts "Fred says hi", because `this = obj` within the call
   

   Note that it has to be part of the same expression as the call. This does not work:

   var s = obj.speak; // Getting a reference to `obj`'s `speak`
   s("hi");           // alerts "undefined says hi", because `this` is not
                      // `obj` during the call
   

2. Using call or apply. These are features of all JavaScript functions. They let you call the function and explicitly set what this will be during the call. So given the obj above:

   var s = obj.speak; // Getting a reference to `obj`'s `speak`
   s.call(obj, "hi"); // alerts "Fred says hi", we explicitly made `this = obj`
                      // within the call
   

   The only difference between call and apply is that when you use call, if you want to pass arguments to the function, you include them as discrete arguments to call as above (note we just passed "hi" as a second argument to call, and call passed it on as the first argument to the function). With apply, rather than an unlimited number of discrete arguments, the second argument is an array of arguments to pass to the function.

   // Example 1: Passing no arguments, no difference.
   // These calls do the same thing.
   func.call(obj);
   func.apply(obj);
   
   // Example 2: Passing one argument (these calls do the same thing).
   func.call(obj, arg);
   func.apply(obj, [arg]); // note that it's in an array
   
   // Example 3: Passing two arguments (these calls do the same thing).
   func.call(obj, arg1, arg2);
   func.apply(obj, [arg1, arg2]); // Again, the args are in an array