JavaScript中如何让类方法内的事件监听器访问所属实例对象

安全阿岳

2026-8-29

类方法内事件监听器获取实例引用的实现方法

普通事件回调函数的this默认指向绑定事件的DOM元素（此处为document），不会自动指向类实例，可通过以下三种常用方案解决：

方案1：使用箭头函数定义回调
箭头函数没有自身的this绑定，会直接继承外层作用域（即addListeners方法执行时的实例上下文）的this指向，是目前最简洁的写法：

class Example {
  constructor() {}

  dosomething(){}
  
  addListeners() {
    document.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') {
        this.dosomething()
      }
    })
  }
}

const exampleObject = new Example()
exampleObject.addListeners()

方案2：使用bind()显式绑定上下文
可以通过Function.prototype.bind()把类实例的this强制绑定到事件回调上：

addListeners() {
  document.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      this.dosomething()
    }
  }.bind(this))
}

方案3：提前缓存实例引用
在进入回调函数前先把实例this存到局部变量中，回调内直接访问该缓存变量即可，是ES6箭头函数普及前的通用兼容写法：
```
addListeners() {
  const instance = this
  document.addEventListener('keypress', function (e) {
    if (e.key === 'Enter') {
      instance.dosomething()
    }
  })
}
```