setInterval中this指向的问题

最近在写一个插件，用到了setInterval踩到了坑，就是javascript中的this指向问题，在此记录一下

 

先上代码，有这么一个构造函数Swipe，以及它的原型

function Swiper() {
    var next = document.getElementById('next')
    //...
  }

  Swiper.prototype = {
    events: function () {
      next.onclick = function () {
        //点击操作
      }
    },
    play: function () {
      setInterval(this.next.onclick, 1000)
    }
  }

当触发play方法时，提示onclick not a function，控制台debugger一看，原来this指向了window，而window当然没有next属性了，自然也没有onclick。

什么原因呢？问题在于在setInterval和setTimeout中，第一个回调函数是指向window的，所以会有问题。

 

解决办法：既然是this的指向问题，那我们给它手动设置指向就行了

1、使用bind

play: function () {
    setInterval(this.next.onclick, 1000)
}

改成

play: function () {
    setInterval(this.next.onclick.bind(this), 1000)
}

2、事先保存this

play: function () {
    var _this = this    
    setInterval(function () {
        _this.next.click()
    }, 1000)
}

3、在setInterval的第三个参数传入this（不支持IE9以下）

play: function () {
    setInterval(function (_this) {
        _this.next.click()
    }, 1000, this)
}