ES6类中如何从点击事件调用Gallery类的prev_image方法

嘿，这个this指向的坑我刚学类的时候也踩过！咱们先搞清楚问题出在哪：当你用普通函数作为按钮的点击回调时，函数里的this会自动指向触发事件的DOM元素（也就是那个prevbtn按钮），而不是你的Gallery实例，所以直接调用this.prev_image()肯定会报错——按钮对象哪有这个方法呀😅

下面给你三种常用的解决方案，选哪种都能搞定：

方法1：提前保存Gallery实例的this #

在draw方法里先把Gallery实例的this存到一个变量（比如self或者that），然后在回调里用这个变量调用方法：

class Gallery{
  constructor(){ }
  draw(){
    // 把Gallery实例的this存起来，后续回调里用它
    const self = this;
    // build button
    prevbtn.draw();
    // button listener
    document.getElementById('prevbtn').addEventListener('click', function(){
      self.prev_image(); // 这里用self就能访问Gallery的方法了
    });
  }
  prev_image(){
    // 你的图片切换逻辑代码
    console.log("切换到上一张图片");
  }
}

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

箭头函数不会绑定自己的this，它会继承外层作用域（也就是draw方法）的this，这个this就是Gallery的实例，所以直接用就行：

class Gallery{
  constructor(){ }
  draw(){
    prevbtn.draw();
    document.getElementById('prevbtn').addEventListener('click', () => {
      this.prev_image(); // 箭头函数里的this就是Gallery实例啦
    });
  }
  prev_image(){
    // 你的图片切换逻辑代码
    console.log("切换到上一张图片");
  }
}

方法3：用bind绑定this #

可以把回调函数的this手动绑定成Gallery实例，这样回调执行时this就指向Gallery了：

class Gallery{
  constructor(){ }
  draw(){
    prevbtn.draw();
    document.getElementById('prevbtn').addEventListener('click', function(){
      this.prev_image();
    }.bind(this)); // 把回调的this绑定为Gallery实例
  }
  prev_image(){
    // 你的图片切换逻辑代码
    console.log("切换到上一张图片");
  }
}

这三种方法里，我个人更推荐箭头函数的写法，代码更简洁直观，也不用额外存变量或者手动绑定～

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