javascript - 从另一个函数读取一个函数

Question

当我点击 .test 时它不执行 do_alert(); 函数并给我一个错误的问题:

do_alert(); is not defined.

有什么问题？当页面加载时，主函数 helpers 已经被读取 为什么不能从 logout_users 函数中获取这个函数？

var setup_system = (function($) {
  "use strict";

  return {
    init: function() {
      this.logout_users();
      this.helpers();
    },
    logout_users: function() {
      $(document).on('click', '.test', function(e) {
        e.preventDefault();
        do_alert();
      });
    },
    helpers: function() {
      function do_alert() {
        alert();
      }
    }
  };
})(jQuery);

jQuery(document).ready(function() {
  setup_system.init();
});

注意:我尝试通过在 logout_users 函数中添加 this.helpers() 来重新读取 helpers 函数，但没有任何变化。

Answer 1

这是因为您在helpers 函数的范围内定义了do_alert()。

要解决此问题，您需要将该函数移动到您返回的对象的范围内。您可以将它放在对象的根级别(这样可以正常工作，但如果您有很多“辅助”函数，可能会变得困惑)或者您可以将它嵌套在您的 helpers 属性中，如果您将其定义为另一个对象。就个人而言，我会使用后者来进行一些组织。试试这个:

var setup_system = (function($) {
  "use strict";

  return {
    init: function() {
      this.logout_users();
    },
    logout_users: function() {
      var _obj = this;
      $(document).on('click', '.test', function(e) {
        e.preventDefault();
        _obj.helpers.do_alert();
      });
    },
    helpers: {
      do_alert: function() {
        alert('foo');
      }
    }
  };
})(jQuery);

jQuery(function() {
  setup_system.init();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Click me</div>

请注意，我在 click 处理程序之外缓存了对对象的引用作为 _obj，因为在该 block 中 this 将引用单击 .test 元素。