How to correctly reference "this"?

Question

Assuming I have the following:

var object = {
    myfunc: function() {
        $.ajax({
           url: url,
           format: format,
           success: function() {

           console.log(this) // This refers to the ajax call and not "object"

                $.ajax({
                  url: url,
                  format: format,
                  success: function() {
                    console.log(this) // this refers to nested ajax call and not "object"
                  }
                });


           }
        });
    }
}

How to get "this" to reference "object" as opposed to the ajax call?

score 5 · Accepted Answer · answered Apr 25 '13 at 13:26

Use $.proxy() to pass a custom context to a callback function

var object = {
    myvar : "hello",
    myfunc : function() {
        $.ajax({
            url : url,
            format : format,
            success : $.proxy(function() {

                console.log(this) // This refers to the ajax
                // call and
                // not "object"

                $.ajax({
                    url : url,
                    format : format,
                    success : function() {
                        console.log(this) // this
                        // refers to
                        // nested ajax call
                        // and not "object"
                    }
                });

            }, this)
        });
    }
}

score 3 · Answer 2 · answered Apr 25 '13 at 13:27

Copy the value of this to another variable when you are still in the context where this holds the value you want.

var object = {
    myfunc: function() {
        var myObject = this;
        $.ajax({

Then use that variable (which will be in scope for functions declared inside it, unless they mask it with another variable of the same name) instead.

success: function() {
    console.log(myObject);
}

score 2 · Answer 3 · edited Apr 25 '13 at 13:30

In my opinion, this is an easier approach than the other one. Just store the reference in a local variable and use it instead of this.

var object = {
    var thisReference = this;
    myfunc: function() {
        $.ajax({
           url: url,
           format: format,
           success: function() {

           console.log(thisReference ) 

                $.ajax({
                  url: url,
                  format: format,
                  success: function() {
                    console.log(thisReference ) 
                  }
                });


           }
        });
    }
}

This is not syntactically-valid Javascript. – kevingessner Apr 25 '13 at 16:36 — kevingessner, Apr 25 '13 at 16:36

Jon Carter · Answer 4 · 2013-04-25T13:41:45.523

Make the object a constructor.

/*
  constructors start with capital letters, by convention.  
  Javascript already has an 'Object' constructor, so we'll change the name.
*/
var MyObject = function(){
  // 'this' now refers to the object.  
  // We'll save a reference to it for use within functions
  var me = this;

  this.myvar: "hello";
  this.myfunc: function(){
    // do whatever you want.  Use 'me' to access your object.
    console.log(me);  // the object!
  }
}

The way you use it might change, depending on whether you want to pretend to be object-oriented. Here's that way:

var obj = new MyObject();  //make the object
obj.myfunc();            //call your function

How to correctly reference "this"?

4 Answers4