Question

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

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

如果我在加载页面后调用（在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元素之后。

为此，请将您的脚本放在标记下方（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属性。您只想将函数本身分配给属性，因此不要将()放在最后来调用它：

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

这与您在()使用foo的原因完全相同（假设您有一个名为f的函数），如果您希望foo引用var f = foo; }：

var f = foo();

如果你说

foo

...你正在调用 {{1}}，而不是指它。

Object属性最初返回undefined，但在重新定义时返回预期值

1 个答案: