javascript - 对象属性最初返回未定义，但重新定义后返回预期值

Question

我有一个像这样构建的 JavaScript 对象:

var Dashboard = {
  form: {
    action: function(){
      return $('#upload_form').attr('action');
    }(),
    //snip (more functions)
  }
}

如果我在页面加载后在 Chrome 控制台中调用(在 WinXP 上使用 Chrome 17)Dashboard.form.action (我检查了脚本并且函数在那里)，结果是 undefined 但是，如果我使用相同的函数重新定义 Dashboard.form.action:

Dashboard.form.action = function(){
  return $('#upload_form').attr('action');
}();

然后调用它，它按预期工作!

我做错了什么？这是一个错误还是我想太多了？

Answer 1

更新:

在下面回复您的评论:

actually what I want to do IS assigning the result to the action property...

在您所说的问题中:

If I call...Dashboard.form.action...

这让你看起来像是在期待 action成为一个函数(你不能“调用”非函数)。

如果您希望它是一个字符串(来自 #upload_form 的“action”属性值)，那么您根本不需要使用函数。但您确实需要确保您是在#upload_form之后执行此操作。元素已存在于 DOM 中。

为此，请将您的脚本放在标记中的下方(anywhere below 没问题；just before or just after the closing </body> tag 效果很好)，或者将您的脚本包装在 ready 中。打电话。

因此，如果您的代码位于 #upload_form 之后，则它会变成这样在标记中:

var Dashboard = {

  form : {
      action : $('#upload_form').attr('action'),

      //snip (more functions)
  }
};

...如果你想使用 ready 则可以这样(使用Dashboard的任何其他也必须等到ready):

jQuery(function($) {
    var Dashboard = {

      form : {
          action : $('#upload_form').attr('action'),

          //snip (more functions)
      }
    };
});

请注意，在第二种情况下，Dashboard将不再是全局变量。这是一件好事，但如果您出于某种原因需要它是全局的，您可以将其导出:

jQuery(function($) {
    var Dashboard = {

      form : {
          action : $('#upload_form').attr('action'),

          //snip (more functions)
      }
    };

    // Export the global
    window.Dashboard = Dashboard;
});

只要确保没有任何东西尝试使用Dashboard之前ready已解雇。

<小时/>

原始答案:

您还有一对额外的 ()对此:

action: function(){return $('#upload_form').attr('action');}()
//                                              here -------^^

通过将它们放在那里，您可以立即调用该函数，并将调用它的结果分配给 action属性(property)。您只想将函数本身分配给属性，因此不要将 ()最后调用它:

action: function(){return $('#upload_form').attr('action');}

这与您不使用 () 的原因完全相同在这里(假设您有一个名为 foo 的函数)如果您想要 f引用foo :

var f = foo;

如果你说

var f = foo();

...您将打电话 foo ，不是指它。