JavaScript类内调用方法报this.log_2 is not a function错误如何解决

错误原因 #

这个报错是典型的JavaScript函数this指向丢失问题：

将this.log_1直接作为回调传入addEventListener时，回调触发时的this会默认指向触发事件的DOM元素（即id为cat_button的按钮对象），而非cat类的实例，因此无法找到挂载在类实例上的log_2方法。

修复方案 #

以下三种方案任选一种即可：

• 方案1：绑定事件回调时用bind手动指定log_1的this指向类实例

event_listener(){
    document.getElementById("cat_button").addEventListener("click", this.log_1.bind(this));
}

• 方案2：将log_1改为箭头函数定义，箭头函数的this会继承定义时的上下文，不会随调用环境改变

log_1 = () => {
    console.log("cat 1");
    this.log_2();
}

• 方案3：事件绑定处用箭头函数包裹log_1调用，保证调用时的this指向类实例

event_listener(){
    document.getElementById("cat_button").addEventListener("click", () => this.log_1());
}

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