Question

I thought I’d got my head around context and scope in javascript. I don’t understand why in one situation proxy/bind works, and in another it doesn’t. Please could someone explain?

Example 1: Proxy (or bind) works:

function Cat(name){
    this.name = name;

    $("#cat").click(
        $.proxy(
            function(e){ this.meow(e); }
        , this)
    );

    this.meow = function(){ alert(this.name + "says meow"); }
}
var cat = new Cat();

Example 2: Proxy and bind don’t work:

function Dog(breed){
    this.breed = breed;

    this.save = function(){
        var that = this;
        $.ajax({
            url: '/ajax/savedog.php', dataType: 'json',

            // This works?? Shouldn't scope be of .ajax()?
            data: this.breed, 

            // success: $.proxy(... // won't work? why?
            success: that.dogSaved, error: ajaxFail
        });
    };

    this.dogSaved = function(){ alert("Dog Saved"); }
}
var dog = new Dog();

Answer 1

You’re copying this to that inside the “click” handler. Do it outside.

The value of this is set anew for and upon each function call. Thus, inside your “click” handler, this is not a dog, it’s a DOM element.

It’s also important to be mindful of the order of evaluation in JavaScript. Parameters to functions are fully evaluated in the context of the calling environment. In your first example, the value of this passed in to $.proxy() is the correct one because it’s a parameter in the context of the Cat constructor, and thus it is correctly a cat. In your call to $.ajax in the Dog constructor, however, the reference to this.breed will not have the correct value, as it is evaluated in the context of the “click” handler and not the constructor. The value of the “data” property should be that.breed once you’ve fixed the initialization of that as described above.

(Also note that as @Musa points out, the Dog constructor is syntactically incorrect; I assume that was just a transcription error.)

edit — I’m not sure what you’re trying with $.proxy() in your updated question, but that “success” property should work if you set it up like this:

   success: $.proxy(that.dogSaved, that),

The first argument to $.proxy() is the function to be called, and the second is the value you want for this when the function is called. In this case, you want it to be the saved reference to the dog object. Note, however, that it will only work if the “save” function is called with this set to a dog. That is, if somewhere you do this:

   var fido = new Dog();
   fido.save();

then things should work. However, if you somehow use that “save” function in some way such that this is not a reference to a dog, then it won’t work. Again, if in the “Dog” constructor you were to move that declaration of “that” out to the constructor scope instead of in “save”, then it won’t matter how “save” is called because “that” will always be a reference to the dog object.