JavaScript中addEventListener内调用类方法报错：handleFormSubmit未定义如何解决？

这个问题的核心原因很明确：在事件监听器的普通函数回调里，this默认指向触发事件的DOM元素（也就是你选中的form），而不是Validate类的实例，所以你调用this.handleFormSubmit时，自然找不到这个方法——因为form元素上根本没有这个方法呀！

下面给你三种常用的解决思路，都能让你正确调用类里的handleFormSubmit方法：

方法1：使用箭头函数（最简洁的现代方案） #

箭头函数不会绑定自己的this，它会继承外层作用域的this（也就是Validate类的实例）。修改后的代码如下：

class Validate { 
  validateFormSubmit(element, constraints) { 
    document.querySelector(element)
      .addEventListener("submit", (ev) => { // 换成箭头函数
        ev.preventDefault(); 
        // 这里的this是Validate类实例，同时用ev.currentTarget获取form元素
        this.handleFormSubmit(ev.currentTarget, constraints); 
      }); 
  } 
  handleFormSubmit(form, constraints) { 
    console.log('success'); 
    console.log('当前表单元素:', form); // 可以正常拿到form DOM元素
  } 
}

方法2：提前保存this到变量（兼容性好的传统方案） #

在事件监听外面，把类实例的this存到一个变量里（比如self），然后在回调里用这个变量调用方法：

class Validate { 
  validateFormSubmit(element, constraints) { 
    const self = this; // 保存类实例的this
    document.querySelector(element)
      .addEventListener("submit", function(ev) { 
        ev.preventDefault(); 
        // self是类实例，this是form DOM元素
        self.handleFormSubmit(this, constraints); 
      }); 
  } 
  handleFormSubmit(form, constraints) { 
    console.log('success'); 
  } 
}

方法3：用bind绑定this（灵活的绑定方案） #

通过bind方法把回调函数的this强制绑定到类实例上，这样回调里的this就变成了类实例，同时用ev.currentTarget获取form元素：

class Validate { 
  validateFormSubmit(element, constraints) { 
    document.querySelector(element)
      .addEventListener("submit", function(ev) { 
        ev.preventDefault(); 
        // 此时this是类实例，ev.currentTarget是form元素
        this.handleFormSubmit(ev.currentTarget, constraints); 
      }.bind(this)); // 绑定类实例的this到回调函数
  } 
  handleFormSubmit(form, constraints) { 
    console.log('success'); 
  } 
}

小提醒 #

注意handleFormSubmit的第一个参数，你原来的代码是传回调里的this（form元素），所以修改后要确保把form元素正确传进去——用ev.currentTarget比ev.target更可靠，因为如果表单里有子元素触发事件，target会指向子元素，而currentTarget始终指向绑定事件的那个form元素。

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