Question

I often have code like this:

function Object() {
}

Object.prototype.getData() {
    // THIS LINE:
    var object = this;
    $.ajax({
        url: '...'
        , success: function(data) {
            object.onLoadData(data);
        }
    })
}

var o = new Object();
o.getData();

My question: what’s the preferred paradigm for the “var object = this” bit above? I’ve seen this:

var self = this;

Which looks good, and I’ll probably steal this method. What is the most common way of referring to parent object from within anonymous functions? Are there cleverer ways of doing this? I often find myself putting the “var object = this;” at the top of most object methods, and it seems like there might be some tricky way to avoid this.

Thanks!

Answer 1

Given your code, don’t use a variable.

Use the context: parameter to set the this value in the callbacks.

Object.prototype.getData = function() {
    $.ajax({
        url: '...',
        context: this, // <-----------set the context for the callbacks
        success: function(data) {
            this.onLoadData(data);
        }
    });
};

---

If the question wasn’t meant to only deal with $.ajax, then I’d use bind()^[docs] to bind the this value to the function.

function successCallback(data) {
    this.onLoadData(data);
}

Object.prototype.getData = function() {
    $.ajax({
        url: '...',
        success: successCallback.bind( this );
    });
};

If you need to support browsers that don’t have .bind(), then there’s a shim in the docs link I provided that you can include.