方法中this指向？

Question

  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))

Answer 1

都是指的BtnComponent的实例，之所以要这么写，是因为后面的this.changeLikeText方法是作为事件回调，当其被调用时，其内部this不是指向我们所要的BtnComponent实例，如果changeLikeText方法内会用到this并且是希望指向BtnComponent实例的话，回调被执行时这将会出现问题，所以需要加一个bind来绑定好this. 这样，就能正常的执行逻辑，而不至于可能出现xxx is not a function之类的报错.

ps: 题主可以搜一下sf里关于 this指向的文章，加深对this的理解：https://segmentfault.com/sear...