class BtnComponent{ constructor(){ this.state = {isLiked: false}; } //改变文本 changeLikeText(){ var likeText = this.el.querySelector('.like-text'); this.state.isLiked = !this.state.isLiked; likeText.innerHTML = this.state.isLiked ? '取消' : '点赞'; } stringDom(string){ var div = document.createElement('div'); div.innerHTML = string; return div; } render(){ this.el = this.stringDom('<button class = "like-button"><span class = "like-text">点赞</span><span>AA</span></button>'); this.el.addEventListener('click', this.changeLikeText.bind(this)); return this.el; } }这是一个点赞的插件，请问这句代码中后两个this分别指什么？为什么这么写？this.el.addEventListener('click', this.changeLikeText.bind(this))
解决方案
都是指的BtnComponent的实例，之所以要这么写，是因为后面的this.changeLikeText方法是作为事件回调，当其被调用时，其内部this不是指向我们所要的BtnComponent实例，如果changeLikeText方法内会用到this并且是希望指向BtnComponent实例的话，回调被执行时这将会出现问题，所以需要加一个bind来绑定好this. 这样，就能正常的执行逻辑，而不至于可能出现xxx is not a function之类的报错.
ps: 题主可以搜一下sf里关于 this指向的文章，加深对this的理解：https://segmentfault.com/sear...