setInterval中this指向的问题

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执行环境所造成的一些问题。

比如：解决了匿名函数this指向的问题
（匿名函数的执行环境具有全局性），即this 指向window

包括setTimeout和setInterval中使用this所造成的问题。

setInterval(()=>{
                      var start=this.msg.substring(0,1)
                      //获取后面所有字符
                      var end=this.msg.substring(1)
                      //得到字符串并赋值
                      this.msg=end+start
                  },500)
              }