JavaScript事件处理函数中访问类成员变量及调用类方法的实现方案

问题描述 #

定义的类代码如下：

class Tool {
  constructor() {
    this.chosenFrameCodeKey = -1;
    this.refs = {
      frameCodeSelect: document.getElementsByClassName("config__selectFrameCode")[0]
    }
    this.attachFrameCodesListener();
  }

  attachFrameCodesListener() {
    this.refs.frameCodeSelect.addEventListener("change", this.frameCodeSelect_onchange)
  }

  frameCodeSelect_onchange = function (event) {
    // 此处无法访问类成员变量 chosenFrameCodeKey
  }
}

使用普通函数定义事件处理方法frameCodeSelect_onchange时，无法在方法内部访问类成员变量chosenFrameCodeKey，也无法调用其他类方法。

解决方案 #

将事件处理方法改为ES6箭头函数定义即可。
普通函数作为DOM事件回调被调用时，this指向会被绑定到触发事件的DOM元素上，因此无法指向类实例，自然访问不到类成员。而箭头函数没有独立的this指向，会继承定义时外层作用域的this（也就是类实例），因此可以正常访问类的成员变量和方法。

修改后代码示例：

class Tool {
  constructor() {
    this.chosenFrameCodeKey = -1;
    this.refs = {
      frameCodeSelect: document.getElementsByClassName("config__selectFrameCode")[0]
    }
    this.attachFrameCodesListener();
  }

  attachFrameCodesListener() {
    this.refs.frameCodeSelect.addEventListener("change", this.frameCodeSelect_onchange)
  }

  frameCodeSelect_onchange = (event) => {
    // 此处可直接通过this访问类成员
    console.log(this.chosenFrameCodeKey)
  }
}

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