Свойство объекта изначально возвращает неопределенное, но при переопределении возвращает ожидаемое значение

Question

У меня есть объект JavaScript, сконструированный так:

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

Если я вызываю (используя Chrome 17 на WinXP) Dashboard.form.action в консоли Chrome после загрузки страницы (я проверил сценарий и функция есть), то результат будет undefined, но если я переопределю Dashboard.form.action используя ту же функцию:

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

, а затем назовите его, он работает как положено!

Что я делаю не так? Это ошибка или я просто переосмыслил это?

Answer 1

Обновление

Re Ваш комментарий ниже:

на самом деле я хочу присвоить результат свойству действия ...

В вопросе, который вы сказали:

Если я позвоню ... Dashboard.form.action ...

что создает впечатление, что вы ожидаете, что action будет функцией (вы не "вызываете" не-функции).

Если вы ожидаете, что это будет строка (значение атрибута "action" из #upload_form), то вам вообще не нужно использовать функцию. Но вам делать нужно быть уверенным, что вы делаете это после того, как элемент #upload_form уже существует в DOM.

Для этого либо поместите свой скрипт под ним в разметке ( где-нибудь ниже , все в порядке; непосредственно перед или сразу после закрывающего тега </body> работает хорошо) или оберните ваш сценарий в 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, не обращаясь к нему.