JavaScript类中this.dataLog调用push报undefined错误的问题排查

嘿，这个问题我太熟悉了——本质上是JavaScript里this指向的坑！咱们先拆解下原因：当你把login.validation直接作为回调传给addEventListener时，函数执行时的this指向的是触发事件的按钮元素，而不是你的LoginDisplay实例。所以在validation方法里，this.dataLog自然就变成undefined了，调用push当然会报错。

三种解决方案任选其一： #

方案1：用bind绑定this

修改事件监听的代码，把validation方法的this强制绑定到login实例上：

btn.addEventListener("click", login.validation.bind(login));

方案2：用箭头函数包裹回调

箭头函数会自动继承外层作用域的this，这里外层的this就是咱们创建的login实例：

btn.addEventListener("click", () => login.validation());

方案3：在类的构造函数里提前绑定方法

在LoginDisplay的构造函数里把需要用到的方法提前绑定好this，这样后续直接使用方法名就不会有指向问题了：

class LoginDisplay {
 constructor() {
 this.dataLog=[];
 // 提前绑定this，避免后续回调里指向混乱
 this.validation = this.validation.bind(this);
 this.render = this.render.bind(this); // 同理，render方法如果后续用到this也建议绑定
 }
 // ... 其他方法保持不变
}
// 之后监听事件直接传方法名即可
btn.addEventListener("click", login.validation);
loginLink.addEventListener("click", login.render);

额外小提示： #

你在render方法里还有个小bug需要修正：

inputEmail = ""; // 这里错误地把inputEmail变量改成了字符串
inputPassword = "";

要改成操作输入框的value属性：

inputEmail.value = "";
inputPassword.value = "";

不然后续获取邮箱和密码输入值的时候会出问题哦～

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