Question

Google is not being helpful trying to find the answer to this question! 🙁

How do I properly reference this.colour from the parent object from within a jQuery function like this:

var obj = {
 colour: 'blue',
 do: function() {
  $.getJSON('getcolour.php', function(resp) {
    if (resp.colour == this.colour) { //<== this.colour doesnt = blue
     //match
    }
  });
 }
}

Answer 1

You need to obtain a reference to this outside of the call to $.getJSON:

do: function() {
    var self = this;
    $.getJSON('getcolour.php', function(resp) {
        if (resp.colour === self.colour) {  // use "self"
            // ...
        }
    });
}

alternatively, on ES5 browsers, use .bind to set the context of the inner callback to this:

do: function() {
    $.getJSON('getcolour.php', function(resp) {
        if (resp.colour === this.colour) {
            // ...
        }
    }).bind(this);  // set the callback's context
}

jQuery’s $.proxy() function can also be used on earlier browsers to achieve the same effect.