无法在对象的函数调用中更新Javascript对象属性

Question

I have a CONTACT javascript object. I call CONTACT.load() to read the data for CONTACT.id through $.ajax(). On success, I am able to use the data returned by the ajax() call. Then I save some of the read data in object properties. However, the saved property values are lost. Here is my code:

var CONTACT=
{
id: 1,
referrals_loaded: false,
city: '',
};



CONTACT.load = function(cb)
{
$.ajax({
        type: "POST",
        url: "contactAjax.php",
        data: { 
            ContactID: this.id,
            actionID: 'LOAD_CONTACT_DATA',
        },
        dataType: "json",
        success: function(data) {
            success = true;
            var address = data['address'];
            var addr = address[0];

            this.city =  addr['city'].trim();
            console.log("City (in ajax() ):" +this.city);
            var province = addr['province'].trim();
            // ... 


            if (typeof cb==='function') (cb)();
        },
        error: function () {

            alert("Could not load Contact data through LOAD_CONTACT_DATA .");
        }
    });

console.log("City (after ajax() ):" +this.city);

}

My calling code is like this:

CONTACT.id = 123456;
CONTACT.load('testtest');

function testtest()    {
   console.log("Contact city is " + CONTACT.city);  
   CONTACT.city = "London";
   console.log("Contact city is " + CONTACT.city);  
}

And the console.log O/P is like this:

City (in ajax() ):MARKHAM  
Contact city in testtest()  
Contact city is London

Notice that when I set the value for CONTACT.city again in testtest(), the object retains the property value. Could someone please explain, why the CONTACT.city becomes empty when testest() is called?

Answer 1

'this' refers to a different object.

CONTACT.load = function(cb)
{
var self = this; // common hack
$.ajax({
        type: "POST",
        url: "contactAjax.php",
        data: { 
            ContactID: this.id,
            actionID: 'LOAD_CONTACT_DATA',
        },
        dataType: "json",
        success: function(data) {
            success = true;
            var address = data['address'];
            var addr = address[0];

            self.city =  addr['city'].trim();  // <-- assign to correct object
            console.log("City (in ajax() ):" +this.city);
            var province = addr['province'].trim();
            // ... 


            if (typeof cb==='function') (cb)();
        },
        error: function () {

            alert("Could not load Contact data through LOAD_CONTACT_DATA .");
        }
    });

console.log("City (after ajax() ):" +this.city);

}