JS 对象字面量，上下文变化

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

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

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

或

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

Answer 3

一切都与执行上下文有关。尽管您的 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();

JS 对象字面量，上下文变化

JS object literal, this context changing

javascript

function

event-handling