Javascript“this”被事件监听器覆盖[重复]

我可能做错了什么，但在尝试将一些面向对象编程应用于 Javascript 时，我发现了一些有趣的行为。考虑以下

function Bug(element) {
    this.focusedCell = null;
    element.addEventListener('click', this.onClick, true);
};

Bug.prototype.onClick = function(event){
    console.log("this is: ");
    console.log(this);
};

当我从控制台调用该方法时，我看到“this”的正确实例，但是当我单击文档中的元素时，我看到文档元素而不是实例。所以...很可能将事件侦听器与实例方法一起使用可能不是一个好主意，至少按照我的方式是这样。

所以问题是：

• 是否可以有一个像这样的事件监听器来调用 javascript 对象的实例方法，同时在调用中保留实例？

• 有更好的模式来做到这一点吗？

编辑： 除了 Chrome 之外，我还没有在其他地方尝试过这个。但我想行为是一样的。

有一个更好的模式，并且不需要太多改变。我先展示代码。

function Bug(element) {
    this.focusedCell = null;
    // --------------------------------v----pass the object, not a function
    element.addEventListener('click', this, true);
};

// Implement the `EventListener` interface
Bug.prototype.handleEvent = function(event) {
    if (event.type === "click")
        this.onClick(event);
}

Bug.prototype.onClick = function(event) {
    console.log(JSON.stringify(this));         // '{"focusedCell":null}'
    console.log(event.currentTarget.nodeName); // "DIV"
};

通过添加handleEvent方法，我们使Bug实施EventListener界面。这使我们能够通过新的Bug对象作为第二个参数addEventListener()而不是一个函数。

现在当"click"事件发生时，.handleEvent()方法将被调用，并且值this在该方法中将是Bug被绑定的对象。

Since this是对Bug例如，它显然不再是对该元素的引用。但这不是必需的，因为该元素可以通过event.currentTarget.

当然，您可以直接将元素添加到您的Bug如果需要，可以在构造函数中添加对象。

DEMO: