在ajax请求返回后,Javascript对象属性转到undefined

如果您有一个对象并为其设置属性,则可以在该对象上调用的函数中访问该属性.但是如果你调用一个函数并执行ajax请求,以便从onreadystatechange调用一个不同的函数,那么二级响应函数就无法访问该属性.这有点令人困惑,所以看看我的意思.属性this.name是更改的属性.

//from W3Schools website
function getXHR(){if (window.XMLHttpRequest){return new XMLHttpRequest();}if (window.ActiveXObject){return new ActiveXObject("Microsoft.XMLHTTP");}return null;}

function TestObject()
{
    this.name = "";            //public
    var xhr = null;            //private
    var response = function()  //private
    {
        if(xhr.readyState > 3)
        {
            alert("B: my name is " + this.name);
        }
    }
    this.send = function()     //public
    {
        alert("A: my name is " + this.name);
        if(xhr === null)
        {
            xhr = getXHR();
        }
        var url = "http://google.com";
        xhr.onreadystatechange = response;
        xhr.open("GET",url,true);
        xhr.send(null);          
    }
}
var o = new TestObject();
o.name = "Ice Cube";
o.send();

结果是：

A: my name is IceCube
B: my name is undefined

如果响应是公开的,那么也会发生.如果xhr是公开的,这也会发生.发生了某种情况,因此调用的响应函数无法访问相同的参数.

解决方法

window拥有onreadystatechange方法,所以在你的回调中,这指的是窗口.

您可以将实例保存在TestObject的函数体中,var that = this并使用that.name.这会将变量绑定到您的回调,以便它会记住自己的实例.

function getXHR(){if (window.XMLHttpRequest){return new XMLHttpRequest();}if (window.ActiveXObject){return new ActiveXObject("Microsoft.XMLHTTP");}return null;}

function TestObject()
{
    var that = this;
    that.name = "";            //public
    var xhr = null;            //private
    var response = function()  //private
    {
        if(xhr.readyState > 3)
        {
            alert("B: my name is " + that.name);
        }
    }
    this.send = function()     //public
    {
        alert("A: my name is " + that.name);
        if(xhr === null)
        {
            xhr = getXHR();
        }
        var url = "http://google.com";
        xhr.onreadystatechange = response;
        xhr.open("GET",true);
        xhr.send(null);          
    }
}
var o = new TestObject();
o.name = "Ice Cube";
o.send();