What does "this" refer to in the following javascript?

Question

DISCLAIMER: I am asking about a specific use of this, not what this is used for in general. So, please no google/copy/paste speed answers (:

I have the javascript/jquery code below:

var req = {};

function getData()
{
    var fromPage = 0;
    var toPage = 1;

    req = $.ajax({
                    url: "/_vti_bin/lists.asmx",
                    type: "POST",
                    dataType: "xml",
                    data: xmlData,
                    complete: onSuccess,
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert("error: " + xhr.statusText);
                        alert(thrownError);
                    },
                    contentType: "text/xml; charset=\"utf-8\""
                });

     req.fromPage = fromPage;
     req.toPage = toPage;
}

function onSuccess(resp) {
    alert(this.fromPage);
}

I find it pretty confusing that the code is using fromPage in two places (sorry not my code).

Does this refer to the var declared inside of getData or the one that is part of the req object? Or maybe something else entirely....

Any help appreciated.

@kingjiv, good catch. Sorry, this is a simplified version of a larger chunk of code. — Abe Miessler, Jun 30 '11 at 23:45
I'm getting a little confused by the syntax of the function declaration being followed by ", 50);" Is there an extra set of braces and closing parens in here? — kinakuta, Jun 30 '11 at 23:45

interjay · Accepted Answer · 2011-06-30T23:54:46.953

According to jQuery.ajax documentation:

The this reference within all callbacks is the object in the context option passed to $.ajax in the settings; if context is not specified, this is a reference to the Ajax settings themselves.

In other words, since you didn't set the context option, this will be the options object {...} passed as the parameter to $.ajax.

The code you posted seems wrong: it reads fromPage from the wrong object. It would work if you set fromPage on the options object instead:

req = $.ajax({
    //other options here...
    fromPage: fromPage
});

score 2 · Answer 2 · answered Jun 30 '11 at 23:45

2

onSuccess() is being called from the complete handler in the context of the ajax request, which is being assigned to the req object, so this is that context - i.e. the req object, and fromPage is in fact req.fromPage

answered Jun 30 '11 at 23:45

Stephen P

14,422
2
43
67

so `this` would be equal to `req` in this case? – Abe Miessler Jun 30 '11 at 23:49

score 0 · Answer 3 · answered Jun 30 '11 at 23:46

0

I belive this is refering to req.fromPage since that is the object that contains the called function.

answered Jun 30 '11 at 23:46

Jamie Dixon

53,019
19
125
162

What does "this" refer to in the following javascript?

3 Answers3

Linked