javascript - 无法访问 JavaScript 对象属性

Question

即使 JavaScript 对象的属性存在，我也无法访问该属性。我正在尝试访问 AngularJS 中 Factory 对象的属性。下面是代码:

angular.module("appManager")

  // factories.js
  .factory("DataFactory", function ($http) {
    var fac = {};

    fac.expenses = {};
    $http.get("mvc/m/revenue.json")
        .success(function (result) {
            console.log(result);            // line 9
            fac.expenses = result.expenses;
        });
    console.log(fac);                       // line 13
    return fac;
  })

  // expenseController.js
  .controller("expenseCtrl", function($scope, DataFactory){
    $scope.data = DataFactory.expenses;
    console.log(DataFactory);               // line 4
    console.log(DataFactory.expenses);      // line 5
    console.log($scope.data);               // line 6

    // Global // var d = {};
    d = DataFactory;
    e = DataFactory.expenses;
  });

控制台中的输出:

也有人问过( here )这个问题，但他没有得到解决方案。我还尝试了那里的建议:使用按键，控制台会抛出“未定义函数”错误。您还可以注意到，$http 内日志中的 log()//9 的调用晚于其他函数；这可能是原因吗？但请注意 log()//13 可以已经打印该对象。

我认为AngularJS可能有问题，我尝试了一些全局变量d和e，用于测试目的，它们也提供了相同的结果。

我还尝试了下标:DataFactory["expenses"] 具有相同的结果

有人可以告诉我我做错了什么吗？

Answer 1

您正在使用异步调用，但尝试将它们视为同步发生。这根本行不通，因为您最终会在请求该结果的网络调用实际完成并返回之前尝试使用该结果。

查看控制台语句的顺序。第 13 行(在 $http.get() 之后)调用发生在第 9 行之前(在 .success 的 $http.get() 处理程序中)。所以，在第 13 行， fac.expenses 是不可能的。尚未分配。即使是标记为第 4、5、6 行的代码也发生在 fac.expenses 之前。在第 9 行之后设置。

您似乎没有编写代码来处理异步网络调用，这就是它无法正常工作的原因。您只能可靠地使用fac.expenses来自.success handler内或从.success调用的东西处理程序。

此外，由于这是一个与计时相关的问题，因此调试工具可能会以多种方式欺骗您。一般来说，您应该记录您正在查找的实际值，而不是父对象，因为 console.log()当您稍后尝试深入查看日志中的父对象时，可能会让您感到困惑(因为它已被填充)。

<小时/>

我不太清楚您在这里想要实现的目标，以确切地知道要推荐什么，但如果您想使用 fac.expenses ，那么您必须在 .success 内部使用它最初返回的处理程序，或者您可以调用其他函数并传递 fac.expenses到其他功能。您无法像现在一样从异步回调中返回它，并期望它在可能已执行的其他链式代码中可用。