Javascript - 對象屬性不轉移

Question

我對JavaScript很新穎，不能爲我的生活弄清楚爲什麼以下對象屬性沒有傳輸。

我打電話的對象，如下所示：

var URL = "TABLE=_Products&COLUMNS=price_Qty,Sale&MATCH=internal_Model&ROWS="+itemnum ; 
var ITEM = new get_Database_Info(URL) ; 

和get_Database_Info是：

function get_Database_Info(PARAMS) { 
    alert(toString(this)); 
    var URL = document.location.protocol+'//'+document.location.host+'/Catalog/Tools/ajax_Database_Request.php' ; 

    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
     } 
    else{// code for IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 

    if(!xmlhttp){alert('Error: Cannot send XML request.');} 
     xmlhttp.onreadystatechange=function() { 

      if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
       alert(toString(this)); 
       var RESPONSE = xmlhttp.responseText ; 
       RESPONSE = RESPONSE.replace(/^\s+/, ''); 
       var ARR = RESPONSE.split('||') ; 
       ARR.pop() ; 
       for(var i=0; i<ARR.length; i++){ 
        var temparr1 = ARR[i].split('=') ; 
        var NUM = temparr1[0] ; 
        this[NUM] = new Array() ; 
         var temparr2 = temparr1[1].split('/|') ; 
         temparr2.shift() ; 
          for(var x=0; x<temparr2.length; x++){ 

           var temparr3 = temparr2[x].split('??') ; 

           this[NUM][temparr3[0]] = temparr3[1] ; 

          } 
       } 

      } 
     } 

    xmlhttp.open("POST", URL, true); 
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xmlhttp.setRequestHeader("Content-length", PARAMS.length); 
    xmlhttp.setRequestHeader("Connection", "close"); 
    xmlhttp.send(PARAMS); 

}

我已經驗證了所有屬性都是 '這個' 內的get_Database_Info的範圍，但它們不會傳回ITEM。

Answer 1

你什麼時候檢查對象的內容？該請求是異步的，因此您必須等到回調處理響應之後才能在對象中有任何屬性。

如果您在創建對象後立即查找屬性，它們將永遠不會在那裏。即使響應非常快，回調第一次可以運行，但當您退出創建對象的函數時，瀏覽器會重新獲得控制權。

Answer 2

我冒昧地猜測，當連接到onreadystatechange的函數運行該this不再連接到在構造函數中被創建，但可能是附着在全局對象或xmlhttp對象的對象。我會嘗試使用var that=this模式：

function get_Database_Info(PARAMS) { 
    alert(toString(this)); 
    var URL = document.location.protocol+'//'+document.location.host+'/Catalog/Tools/ajax_Database_Request.php' ; 

    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
     } 
    else{// code for IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 

    var that=this; // value of that will be stored in the closure 

    if(!xmlhttp){alert('Error: Cannot send XML request.');} 
     xmlhttp.onreadystatechange=function() { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
       alert(toString(that)); 
       var RESPONSE = xmlhttp.responseText ; 
       RESPONSE = RESPONSE.replace(/^\s+/, ''); 
       var ARR = RESPONSE.split('||') ; 
       ARR.pop(); 
       var arrLength = ARR.length; // always precompute array length 
       for(var i=0; i<ARR.length; i++){ 
        var temparr1 = ARR[i].split('=') ; 
        var NUM = temparr1[0] ; 
        // that is actually equal to the object that I created 
        // in the constructor. 
        that[NUM] = new Array() ; 
        var temparr2 = temparr1[1].split('/|') ; 
        temparr2.shift() ; 
        var arrayLength = temparr2.length; // always precompute length 
        for(var x=0; x<arrayLength; x++){ 
         var temparr3 = temparr2[x].split('??') ; 
         that[NUM][temparr3[0]] = temparr3[1] ; 
        } 
       } 
      } 
     } 

    xmlhttp.open("POST", URL, true); 
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xmlhttp.setRequestHeader("Content-length", PARAMS.length); 
    xmlhttp.setRequestHeader("Connection", "close"); 
    xmlhttp.send(PARAMS); 

此外，如在評論中指出，當你遍歷值在數組中的for循環，你不應該直接使用array.length，作爲length方法每次都會在循環中調用，增加了大量不必要的工作。

另外，正如@Guffa所說的，添加值的函數是異步調用的，所以這些屬性在XmlHttpRequest完成之前不會存在，這是一個非常危險的反模式。我強烈建議不要這樣做。最好讓您的構造函數對數據進行同步請求。