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

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

更新：

在下方回复您的评论：

实际上我想要做的是将结果分配给 action 属性...

在你说的问题中：

如果我打电话...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;
});

只要确保在ready 被触发之前没有尝试使用Dashboard。

---

原答案：

你有一对额外的()：

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

通过将它们放在那里，您可以立即调用该函数，并将调用它的结果分配给action 属性。你只是想把函数本身赋给属性，所以不要把()放在最后来调用它：

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

如果你想让f 引用foo，这与你不会在这里使用() 的原因完全相同（假设你有一个名为foo 的函数）：

var f = foo;

如果你说

var f = foo();

...你会打电话foo，而不是指它。