javascript - addEventListener 和 this 的范围

Question

我有一个第三方 Flash 对象，我可以通过他们提供的 javascript API 对其进行操作。我试图在这个对象上监听一个事件，然后在我的对象内触发事件以进一步冒泡事件。我碰巧在使用 EXT Js，但我认为它在这里并不重要。

示例代码

this.chart.addEventListener('create', function() {
    this.fireEvent('created');
}, false)

我的问题是匿名函数中的“this”是指触发事件的对象，而不是我想要触发事件的对象。

它的另一个范围问题。提前感谢您的帮助。

score 13 · Accepted Answer

在引用“this”对象之前创建一个外部变量怎么样。例如：

var _this = this;
this.chart.addEventListener('create', function() { _this.fireEvent('created'); }, false)

score 5 · Accepted Answer

虽然其他答案可以满足您的需求，但它们不能以最有效（可扩展）的方式工作，因为它们最终不会将视图对象（this.chart）与该视图的逻辑（fireEvent()）分离。在 MVC 应用程序中，这些视图“决策”驻留在控制器中。控制器“控制”视图并且应该包含视图可以访问的所有 API。

在您的示例中，this是控制器，这很好（这意味着您将侦听器添加到正确的位置）。您真正需要做的就是将处理程序绑定到应该执行“处理”的事情的范围 - 在您的情况下this：：

// `this` is the controller of `chart`
this.chart.addEventListener('create', function() {
    this.fireEvent('created');
}.bind(this));

此页面上的其他答案所做的是使您的视图成为它自己的控制器，但仅在处理“创建”事件时，通过使用var self = this. 同样，这工作得很好，但它在事件驱动的应用程序中不能很好地工作，如果你有很多事件要处理，它就没有意义了。

.bind()是一个 ECMAScript 5 实现。如果它需要在更旧的浏览器中工作，这里描述了一个很好的方法（使用functions和.call()）：https ://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind

score 1 · Accepted Answer

这是解决此问题的典型方法：-

(function(self) {
  self.chart.addEventListener('create', function() {self.fireEvent('created');}, false);
})(this);

3 回答 3