Trouble with `this` when sending prototype-based class with $.ajax

Question

If we have the following class (a simplified example):

function MyClass() {
    this.greeting = "Where is the ice cream?";
}

MyClass.prototype.talk = function() {
    console.log(this.manners(this.greeting));
}

MyClass.prototype.manners = function(phrase) {
    return "I beg your pardon. " + phrase;
}

And then we attempt to send it through ajax as follows:

var c = new MyClass();
$.ajax({
    data : c,
    url : "ajax.php",
    dataType : "json",
    type : "post"
});

I get an exception from MyClass.prototype.talk, saying that "this.manners is not a function". The reason I get this exception is that, for some reason, the ajax call is forcing all of the methods on MyClass to be called, with a this of Window (rather than an instance of MyClass).

Accordingly, I have a couple of questions:

• Why does the ajax call force every method of the class to be called with Window for this?
• Is it not appropriate to call manners from talk in the way that I am? Should I be setting this myself? (not sure how that's possible in this context)

In general, I am still quite ignorant about how and when to use apply and call, so this whole topic is very confusing to me. Whenever I've gotten in trouble in the past with such issues (e.g., in event-handling), I've resorted to the var that = this; work-around, but I think it's time to understand the topic more in-depth. Besides, that fix doesn't work here anyway.

Answer 1

EDIT: Whilst the methodology is correct, prototypes don't inherit local variables, stingify looks like the best route.

To answer questions: 1. 'this' always reflects the current context and AJAX resorts to a global scope thus resulting in window. 2. Is it appropriate? Probably not. I would be inclined to use it in the following way:

var c = new MyClass();
c.greeting = 'You ate all the ice cream!';
c = c.manners(c.greeting);
$.ajax({
    data : c,
    url : "ajax.php",
    dataType : "json",
    type : "post"
});

Suggestion below won't work in this instance:

Off the top of my head; explicitly set 'this' in myClass()

var _that = this;

... replace 'this' with _that in your prototype methods

Scope is lost during an AJAX request and reverts to window. Defining _that = 'this' at the top of your class always ensures scope stays intact.

Answer 2

I think you need to serialize your data.

data : JSON.stringify(c),

It seems to POST now: http://jsfiddle.net/JvPym/

I don't think that there were any problems with this or window.

Answer 3

One thing to know about javascript, is that it doesn't have classes. Javascript has objects and functions (well functions are just objects).

The this variable is attached to functions, and follows the "invocation pattern". this is given a certain value depending on how you invoke a function. All function objects have a call and apply method which execute the function object they're called on. The first parameter to these methods specifies the object which will be referenced as the this context during execution of the function, however if it's null or undefined, the global object window, is used.

the best way to overcome this is to create an internal variable in the function that references this later on in the correct context. Below is an example on how it could be rewritten:

function MyClass() {
        var _self = this;  
        this.greeting = "Where is the ice cream?";


    this.talk = function() {
        console.log(_self.manners(this.greeting));
    }

    this.manners = function(phrase) {
        return "I beg your pardon. " + phrase;
    }
}

Notice how _self if used to reference the correct context. In your functions, you would only reference _self instead of this.