Javascript對象屬性在控制台中可見，但未定義？

Question

我無法弄清楚如何在Javascript中訪問對象屬性。 我有一個返回一個對象的函數，當它在Safari中記錄到控制台時我可以看到該對象及其所有屬性，但我無法獲取其他函數的屬性值。 例如，嘗試提醒其中一個屬性返回'undefined'。

生成對象的函數

getProfile : function() {

  FB.api('/me', function(response) {
    facebook.profile.user_id = response.id;
    facebook.profile.name = response.name;
    facebook.profile.firstName = response.first_name;
    facebook.profile.lastName = response.last_name;
    facebook.profile.gender = response.gender;
  });

  FB.api('/me/photos', {limit: 8}, function(response) {
    facebook.profile.numPhotos = response.data.length;
    for (key in response.data) {
      var photoUrl = response.data[key].source;
      eval('facebook.profile.photo' + key + '= photoUrl');
    }
  });

  return facebook.profile;
}

試圖在另一個腳本中使用該功能

function loadProfile() {
  var profile = facebook.getProfile();


console.log(profile); alert(profile.name); } 

Answer 1

函數getProfile調用FB API函數FB.api ，它執行異步HTTP請求。 在你的loadProfile函數調用中，你調用getProfile，它會立即返回沒有填充數據的facebook.profile對象，因為HTTP請求還沒有完成。

考慮以下變化：

getProfile : function(fCallback) {
  var bInfo = false,
      bPhotos = false;    

  FB.api('/me', function(response) {
    facebook.profile.user_id = response.id;
    facebook.profile.name = response.name;
    facebook.profile.firstName = response.first_name;
    facebook.profile.lastName = response.last_name;
    facebook.profile.gender = response.gender;

    bInfo = true;
    if (bPhotos)
       fCallback(facebook.profile);
  });

  FB.api('/me/photos', {limit: 8}, function(response) {
    facebook.profile.numPhotos = response.data.length;
    for (key in response.data) {
      var photoUrl = response.data[key].source;
      eval('facebook.profile.photo' + key + '= photoUrl');
    }

    bPhotos = true;
    if (bInfo)
       fCallback(facebook.profile);
  });
}

並按以下方式調用此函數：

function loadProfile() {
  facebook.getProfile(function (profile) {
    alert(profile.name);
  });
}

你可以在控制台中看到字段的原因是因為你在異步調用成功執行后對對象進行了內省。 然而，警報調用立即在尚未填充的對象的同一線程中執行。

Answer 2

雖然'謝爾蓋伊林斯基'可能已經考慮過了正確的理由，但還有更多的事情可以考慮。 通常是錯誤的，很難調試。

有時會發生這種情況，你的對象鍵包含空格，讓我們說：

var myObj = new Object();

myObj['key1'] = 'val1';
myObj['key2'] = 'val2';
myObj['key3 '] = 'val3';  //the key contains spaces here
myObj['key4 '] = 'val4';  // the key contains spaces here

因此，當您通過console.log(myObj)將其登錄到控制台時，您將獲得：

Object { key1="val1", key2="val2", key3 ="val3",  key4 ="val4"}

但是當你訪問：

alert(myObj.key1); //Ok: val1  
alert(myObj.key2); //Ok: val2  

alert(myObj.key3); //undefined  
alert(myObj.key4); //undefined  

alert(myObj['key3']; //undefined  
alert(myObj['key4']; //undefined  

這些是錯誤的常見區域，其中一個錯誤地放置空間，可能是在進行復制粘貼時，並且發生這種情況，如果說， console log能夠顯示它，但我無法訪問它。