javascript - 一个JS轮播报错

Question

写了个面向对象轮播，实例化后默认执行这个defaultRunning()方法，执行正常，鼠标移动到对象上也正常停止播放，但当鼠标离开后，开始报错，似乎this的指向变了，目前没搞明白，麻烦大家给看看，谢谢 报错提示： ...

巴扎黑 · Answer

this.obj.onmouseover = this.stop;
this.obj.onmouseout = this.play;

onmouseover, 如果你没有做过特殊处理的话，回调函数中的 this 指向的是你的obj，所以说，this的确会变得。

可以尝试改成：

this.obj.onmouseover = this.stop.bind(this);
this.obj.onmouseout = this.play.bind(this);

怪我咯 · Answer

調整了您的範例如下 Codepen 範例

function Plays(selector) {
  this.page = 0;
  this.element = document.querySelector(selector);
}

Plays.prototype = {
  defaultRunning: function() {
    this.play();
    this.element.onmouseover = () => this.stop(); // 應該使用閉包
    this.element.onmouseout = () => this.play();
  },
  prev: function() { },
  next: function() {
    this.element.innerHTML = ++this.page;
  },
  play: function() {
    this.timer = setInterval(function() {
      this.next();
    }.bind(this), 1000);
  },
  stop: function() {
    clearInterval(this.timer);
  }
}

new Plays('.slide').defaultRunning();