您可以使用bind来指定应该用作this的值，用于对给定函数的所有调用。

   var Something = function(element) {
      this.name = 'Something Good';
      this.onclick1 = function(event) {
        console.log(this.name); // undefined, as this is the element
      };
      this.onclick2 = function(event) {
        console.log(this.name); // 'Something Good', as this is the binded Something object
      };
      element.addEventListener('click', this.onclick1, false);
      element.addEventListener('click', this.onclick2.bind(this), false); // Trick
    }

上面示例中的一个问题是您无法使用绑定删除侦听器。另一种解决方案是使用一个名为handleEvent的特殊函数来捕获任何事件：

var Something = function(element) {
  this.name = 'Something Good';
  this.handleEvent = function(event) {
    console.log(this.name); // 'Something Good', as this is the Something object
    switch(event.type) {
      case 'click':
        // some code here...
        break;
      case 'dblclick':
        // some code here...
        break;
    }
  };

  // Note that the listeners in this case are this, not this.handleEvent
  element.addEventListener('click', this, false);
  element.addEventListener('dblclick', this, false);

  // You can properly remove the listners
  element.removeEventListener('click', this, false);
  element.removeEventListener('dblclick', this, false);
}

像往常一样，mdn是最好的:)。我只是复制粘贴了部分而不是回答这个问题。

您需要将处理程序“绑定”到您的实例。

var _this = this;
function onClickBound(e) {
  _this.handleCellClick.call(cell1, e || window.event);
}
if (cell1.addEventListener) {
  cell1.addEventListener("click", onClickBound, false);
}
else if (cell1.attachEvent) {
  cell1.attachEvent("onclick", onClickBound);
}

请注意，这里的事件处理程序规范化event对象（作为第一个参数传递）并handleCellClick在适当的上下文中调用（即引用附加事件侦听器的元素）。

还要注意这里的上下文规范化（即this在事件处理程序中设置正确）在用作事件处理程序的函数 ( onClickBound) 和元素对象 ( cell1)之间创建循环引用。在某些版本的 IE（6 和 7）中，这可能并且可能会导致内存泄漏。这种泄漏本质上是浏览器由于本机对象和宿主对象之间存在循环引用而无法在页面刷新时释放内存。

要规避它，您需要 a) 放弃this规范化；b) 采用替代的（和更复杂的）规范化策略；c) 在页面卸载时“清理”现有的事件侦听器，即通过使用removeEventListener,detachEvent和 elements nulling（不幸的是，这会使浏览器的快速历史导航无用）。

您还可以找到处理此问题的 JS 库。它们中的大多数（例如：jQuery、Prototype.js、YUI 等）通常按照 (c) 中的描述处理清理。

此外，另一种方法是使用EventListener 接口（来自 DOM2 ！想知道为什么没有人提到它，考虑到它是最简洁的方法并且仅适用于这种情况。）

即，不是传递回调函数，而是传递一个实现 EventListener 接口的对象。简单地说，它只是意味着您应该在名为“handleEvent”的对象中有一个属性，它指向事件处理函数。这里的主要区别在于，在函数内部，this将引用传递给addEventListener. 也就是说，this.theTicketTable将是下面代码中的对象实例。要理解我的意思，请仔细查看修改后的代码：

ticketTable.prototype.render = function(element) {
...
var self = this;

/*
 * Notice that Instead of a function, we pass an object. 
 * It has "handleEvent" property/key. You can add other
 * objects inside the object. The whole object will become
 * "this" when the function gets called. 
 */

cell1.addEventListener('click', {
                                 handleEvent:this.handleCellClick,                  
                                 theTicketTable:this
                                 }, false);
...
};

// note the "event" parameter added.
ticketTable.prototype.handleCellClick = function(event)
{ 

    /*
     * "this" does not always refer to the event target element. 
     * It is a bad practice to use 'this' to refer to event targets 
     * inside event handlers. Always use event.target or some property
     * from 'event' object passed as parameter by the DOM engine.
     */
    alert(event.target.innerHTML);

    // "this" now points to the object we passed to addEventListener. So:

    alert(this.theTicketTable.tickets.length);
}

这个箭头语法对我有用：

document.addEventListener('click', (event) => {
  // do stuff with event
  // do stuff with this 
});

this将是父上下文而不是文档上下文。

在 ES6 中，您可以使用箭头函数，因为它将使用词法作用域 [0]，这样您就可以避免使用bindor self = this：

var something = function(element) {
  this.name = 'Something Good';
  this.onclick1 = function(event) {
    console.log(this.name); // 'Something Good'
  };
  element.addEventListener('click', () => this.onclick1());
}

[0] https://medium.freecodecamp.org/learn-es6-the-dope-way-part-ii-arrow-functions-and-the-this-keyword-381ac7a32881