Javascript google map api addDomListener 更改此上下文

Question

我正在使用 GoogleMaps API 进行一些工作，并创建了一个模块来保存一些自定义函数:

myFuncs = {
  doStuff: function() {
     console.log('I am doing stuff');
  },
  callStuff: function() {
     console.log('I am calling doStuff');
     this.doStuff();
  }
}

这似乎适合我的需要。但是当我这样做时:

google.maps.event.addDomListener(document.getElementById('myButton'), 'click', myFuncs.callStuff);

单击按钮时出现以下错误:

Uncaught TypeError: Object #<HTMLButtonElement> has no method 'doStuff'

我在这里了解到 this 的上下文由于绑定(bind)到 Dom 对象而发生了变化，但我不完全理解发生了什么或如何解决它。

Answer 1

尝试将函数调用包装在匿名函数中。例如:

google.maps.event.addDomListener(document.getElementById('scrollToForm'), 'click', function(){myFuncs.callStuff()});

我刚刚运行了这个，它似乎有效。

<小时/>编辑

当您不使用匿名函数时，回显 this 表明您处于绑定(bind)到的任何对象的上下文中。从匿名函数中触发它会将您的上下文设置为您正在调用的对象。不确定这是否是最好的方法，但它确实有效。您可以显式调用该对象，而不是使用 this。 IE浏览器

myFuncs = {
  doStuff: function() {
     console.log('I am doing stuff');
  },
  callStuff: function() {
     console.log('I am calling stuff');
     myFuncs.doStuff();
  }
}

这消除了上下文中的任何困惑。