JavaScript Graph类中addEventListener回调调用类方法报错的解决办法

问题核心：事件回调用普通函数时，this指向触发事件的DOM元素（即#slider），无法访问类实例的fun方法；直接调用fun()时，回调作用域中不存在该变量，导致引用错误。以下是几种可行的解决办法：

方法1：使用箭头函数作为回调 #

箭头函数不会绑定自身的this，它的this继承自外层作用域（此处为类实例），因此可以直接调用this.fun()：

export default class Graph {
    constructor(props) {
        document.querySelector('#slider').addEventListener('change', () => {
            this.fun()
        })
    }
    fun () {
        // some code
    }
}

方法2：提前保存类实例的this到变量 #

在constructor中先将类实例的this存入变量（比如self），回调中通过该变量访问fun方法：

export default class Graph {
    constructor(props) {
        const self = this;
        document.querySelector('#slider').addEventListener('change', function (){
            self.fun()
        })
    }
    fun () {
        // some code
    }
}

方法3：用bind绑定回调的this #

通过bind方法将回调函数的this绑定到类实例，确保回调内的this指向类实例：

export default class Graph {
    constructor(props) {
        document.querySelector('#slider').addEventListener('change', function (){
            this.fun()
        }.bind(this))
    }
    fun () {
        // some code
    }
}

方法4：将类方法定义为箭头函数（类字段语法） #

如果运行环境支持类字段语法，可以直接把fun定义为箭头函数，这样它的this会始终绑定到类实例：

export default class Graph {
    constructor(props) {
        document.querySelector('#slider').addEventListener('change', function (){
            this.fun()
        })
    }
    fun = () => {
        // some code
    }
}

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