javascript 模块如何获取当前对象（this 引用其他对象）？

Question

我注意到 this 在我添加为事件侦听器的函数中引用了其他内容。我阅读了 this informative resource 和一些关于 Whosebug 的问题，但我不知道如何将它应用到我的案例中（我对 "oop" 和 javascript 中的模块模式很陌生，所以我有点迷路了）。

这是我的小模块：

var myModule = myModule || ( function() {
  // Adds event listener for all browsers
  // see  
  function addEvent( element, event, listener ) {
    // IE < 9 has only attachElement
    // IE >= 9 has addEventListener
    if ( element.addEventListener ) {
      return element.addEventListener( event, listener, false );
    } else if ( element.attachElement ) {
      return element.attachElement( "on" + event, listener );
    }
  }

  return {
    init: function() {
      // Add event listeners
      addEvent(
        document.getElementById( "myElementId" ),
        "click",
        this.processMyElement
      );
      addEvent(
        document.getElementById( "myOtherElementId" ),
        "click",
        this.processMyOtherElement
      );
    },
    hideElementById: function( elementId ) {
      document.getElementById( elementId ).style.display = "none";
    },
    showElementById: function( elementId ) {
      document.getElementById( elementId ).style.display = "block";
    },
    processMyElement: function() {
      this.hideElementById( "myElementId" );
      this.showElementById( "myOtherElementId" );
    },
    processMyOtherElement: function() {
      // Do something else...
    }
  };
}() );

问题是我在 processMyElement 中调用 hideElementById 的 this 引用的是我添加了 eventListener 的元素，而不是当前对象。

我尝试了几件事都没有成功：

删除 addEvent 中的 return，
使用var that = this作为模块的私有属性（放置在addEvent定义之前的模块中）并在processMyElement中使用that
在 init 方法中使用 apply 但它（显然）在将侦听器添加到元素时调用 processMyElement

谁能帮我解决这个问题？我尝试了一些东西，但我看不出如何做得更好...

PS：我尝试构建可测试的代码，这就是为什么我有那些 hideElementById 和 showElementById 方法，以分离各种功能（实际上可能很笨拙但是那就是我在 ATM 的地方...)。

Answer 1

有（不止）几种获得正确 this 绑定的常用方法。例如，您可以使用闭包：

  var that = this;
  addEvent(
    document.getElementById( "myOtherElementId" ),
    "click",
    function () {
      that.processMyOtherElement();
    }
  );

或者您可以使用绑定：

  addEvent(
    document.getElementById( "myOtherElementId" ),
    "click",
    this.processMyOtherElement.bind(this)
  );

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

您使用哪一个取决于其他因素。

javascript 模块如何获取当前对象（this 引用其他对象）？

javascript module How to get the current object ( this referencing something else )?

javascript

unit-testing

this

module-pattern