Javascript 对象属性在控制台中可见，但未定义？

Question

我无法弄清楚如何在 Javascript 中访问对象属性。我有一个返回对象的函数，当它被登录到 Safari 的控制台时，我可以看到该对象及其所有属性，但我无法获取其他函数的属性值。例如，尝试警告其中一个属性会返回“未定义”。

生成对象的函数

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();<p></p>

<p>console.log(profile);
  alert(profile.name);
}
</p>

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);
  });
}

您之所以能在控制台中看到字段，是因为您在异步调用成功执行后对对象进行了内省(introspection)。然而，警报调用立即在同一线程中对尚未填充的对象执行。