Question

我注意到declare在我添加为事件监听器的函数中引用了其他内容。我阅读了this informative resource以及有关stackoverflow的一些问题，但我不知道如何将它应用到我的案例中（我对jop中的“oop”和模块模式很新，所以我有点迷失）。

这是我的小模块：

this

我在var myModule = myModule || ( function() { // Adds event listener for all browsers // see http://stackoverflow.com/a/6348597 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... } }; }() );中用来调用this的{{1}}引用了我添加了eventListener的元素，而不是当前对象。

我尝试了一些没有成功的事情：

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

有人可以帮我吗？我尝试了一些东西，但我看不出怎么做得更好......

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

Answer 1

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

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

或者您可以使用bind：

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

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

bind（）方法创建一个新函数，在调用时，将其this关键字设置为提供的值，并在调用新函数时提供任何前面提供的给定参数序列。

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

javascript模块如何获取当前对象（这引用了其他内容）？

1 个答案: