如何在事件监听器中访问类函数？遇TypeError: this.addEvent is not a function报错

这个问题我之前也碰到过，主要是两个关键问题导致的：构造函数拼写错误，以及回调函数里的this指向不符合预期。我来一步步帮你解决：

1. 先修正构造函数的拼写错误 #

你代码里的construct()是拼写错误，ES6类的构造函数必须是constructor()，这个错误会导致this.events无法被正确初始化，甚至可能影响类实例的正常创建：

class TEST { 
  constructor(){ // 修正为constructor
    this.events = []; 
  } 

  // 假设这是你要调用的addEvent方法
  addEvent() {
    console.log('addEvent 执行了');
    // 这里可以写你的业务逻辑
  }
} 

2. 解决回调中this指向的核心问题 #

当你把回调函数传给addEventListener时，回调执行时的this默认指向触发事件的对象（这里是document），而不是你的TEST类实例，所以调用this.addEvent会抛出“不是函数”的错误。下面是几种常用的解决方案：

方案一：用bind()绑定this #

在ready方法里，把回调函数的this绑定为当前TEST实例，这样回调执行时就能正确访问类的方法：

TEST.prototype.ready = function(callback) { 
  // 将回调的this绑定为当前TEST实例
  const boundCallback = callback.bind(this);
  
  if (document.readyState !== 'loading') {
    boundCallback(); 
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', boundCallback); 
  } else {
    document.attachEvent('onreadystatechange', boundCallback); 
  }
}

// 使用示例
const testObj = new TEST();
testObj.ready(function() {
  this.addEvent(); // 现在this指向testObj，能正常调用addEvent
});

方案二：用箭头函数继承外层this #

箭头函数不会创建自己的this，它会继承外层作用域的this。你可以在调用ready时直接传入箭头函数作为回调：

const testObj = new TEST();
testObj.ready(() => {
  this.addEvent(); // 箭头函数的this继承自外层，指向testObj实例
});

方案三：在ready内部用变量保存实例的this #

你也可以在ready方法里先把实例的this存到一个变量（比如self），然后在回调里用这个变量来访问类方法：

TEST.prototype.ready = function(callback) { 
  const self = this; // 保存当前实例的this
  const wrappedCallback = function() {
    callback.call(self); // 强制让回调的this指向self（TEST实例）
  };

  if (document.readyState !== 'loading') {
    wrappedCallback(); 
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', wrappedCallback); 
  } else {
    document.attachEvent('onreadystatechange', wrappedCallback); 
  }
}

总结 #

先修正构造函数的拼写错误，再通过绑定this、使用箭头函数或者保存实例引用的方式，确保回调函数执行时的this指向你的TEST类实例，就能正常调用addEvent方法了。

内容的提问来源于stack exchange，提问作者Lanibox