Question

I have a following (simplified) code:

var myModule = {

    submitDummyForm: function(){ 
        console.log(this); // the right object is logged out
        var that = this; // keep a reference
        $.ajax({
            type:'POST',
            url: 'http://localhost/',
            data: {dummyData: 'something'},
            dataType: 'json',
            success: that.dummyFormSuccess

        });
    },

    dummyFormSuccess: function(data){ 
        console.log(this); // 'this' is logged out as some foreign object, most probably jQuery.ajax object
    }
}

It leads to ‘this’ being lost in the dummyFormSuccess, no matter if I use this.dummyFormSuccess or that.dummyFormSuccessfor as an argument for my ajaxSubmitForm().

But the following code gets executed as I need:

var myModule = {

    submitDummyForm: function(){ 
        console.log(this); // the right object is logged out
        var that = this; // keep a reference
        $.ajax({
            type:'POST',
            url: 'http://localhost/',
            data: {dummyData: 'something'},
            dataType: 'json',
            success: function(data) {
                 that.dummyFormSuccess(data);
            }
        });
    },

    dummyFormSuccess: function(data){ 
       console.log(this); // now 'this' is logged out correctly as the real myModule object
    }
}

I’m still not very comfortable with advanced topics of Javascript but I already know, that ‘this’ may get redefined, depending on where it is used. I thought if I use ‘that’ to store the reference to ‘this’, it should also keep my ‘this’ inside the called function. It seems weird, that I can call that.dummyFormSuccess(data) in a wrap-around function and it gets correct ‘this’ inside, but if I just assign it to $.ajax success, my ‘this’ gets lost.

Can anybody explain, where is ‘this’ getting lost in my case and why it works OK in the second example? Is it a problem with jQuery (maybe jQuery.ajax() overwrites my ‘this’ somehow in my case) or just a feature of the language?

Answer 1

Everything is correct. Your this is lost in a first example because you are assigning function that.dummyFormSuccess to jQuery ajax object’s success. So, this way, deep inside jQuery, it’s called something like ajax.success. So, this is overwritten with ajax object.

With second approach you create an anonymous function and assgn it to success. So inside your anonymous function, this points to ajax object, but that variable is accessible and have not been overwritten.