javascript - JS 对象字面量，this 上下文发生变化

Question

我正在改进我的 Javascript 结构并尝试找出我喜欢的模式，我有以下内容:

var aThing = (function() {

  var module;

  return {

    init: function() {
      module = this;
      console.log(module);
    },

  };

})();

当我运行aThing.init();时，它会记录Object {init: function}，这就是我想要的，当我做这样的事情时就会出现问题:

document.addEventListener('click', aThing.init, false);

这会记录#document。当我运行不带括号的函数时，this 似乎正在发生变化，但我不知道为什么。

Answer 1

这都是关于执行上下文的。尽管您的 init 方法位于 aThing 模块内，但您在其他地方执行它，因此您使用的“this”关键字将引用执行上下文。

您应该考虑利用您的模块来处理该事件，而不是在模块外部编写事件处理程序。它可以从模块的 init 方法内部完成，这将为您提供一个更清晰的结构，因为您将有关模块的所有内容都存储在模块本身内部，而不是在模块外部执行某些操作并在模块内部执行其他操作。

见下文:

var aThing = (function() {

  var module;

  return {
    
    init: function() {
      module = this;

      // Handle event binding from somewhere within your module
      document.addEventListener('click', module.doSomething, false);
    },
    
    doSomething: function () {
      console.log('Doing something.');
    }
  };

})();

// Initialize your module
aThing.init();