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

您正在获取'document'引用，因为在文档上下文中调用了init()函数。您可以将函数绑定到您想要的对象。

aThing.init.bind(aThing)

或者你可以参考模块，如果它，

var aThing = (function() {
    var module = {
        name  : 'My module',
        init : function() {
          alert(module.name);
        }

   };
  return module;

})();

Answer 2

这都是关于执行上下文的。虽然你的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();

Answer 3

当然，因为事件处理程序中的上下文将是document。使用：

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

或

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

JS对象文字，这个上下文改变

3 个答案: