js中this的问题

Question

先上代码：

;(function(){
  var slider = {
    $con : $('.slider-item'),
    index : 0,
    slide : function(index){
      this.$con.eq(index).siblings().animate({
        opacity : 0
      },1600);
      this.$con.eq(index).animate({
        opacity : 1
      },1600);
    },
    autoShow : function(){
      this.index += 1;
      if(this.index <= 3 - 1){
          slider.slide(this.index);
      }else{
          this.index = 0;
          slider.slide(this.index);
      }
      setInterval(this.autoShow,5000);
    }
  }
  slider.autoShow();
})();

这是我随手写的一段slider代码。但注意这一段：

if(this.index <= 3 - 1){
      slider.slide(this.index);
  }else{
      this.index = 0;
      slider.slide(this.index);
  }

中间slider.slide()我本来想写成this.slide()，但编译器提示this.slide() is undefined，我不太理解，望各位大大不吝赐教！

Answer 1

你这种写法并不推荐,内部不要使用setInterval,这样会开启多个计时器,用setTimeout替代吧

//方法1,注意 bind是es5里面的,需要ie10及以上浏览器才支持
setTimeout(this.autoShow.bind(this), 5000);
//方法2,全部兼容,把this代入到闭包中
var self = this;
setTimeout(function(){
  self.autoShow()
}, 5000);
//方法3,Arrow Function需要最新的chorme才支持的新语法
setTimeout(()=>this.autoShow(),5000);

Answer 2

setTimeout(this.autoShow.bind(this),5000); // bind(this)

另外setInterval改成setTimeout，setInterval会疯掉

Answer 3

错在你的定时器那一块setInterval(this.autoShow,5000)

Answer 4

<script>alert("111");</script>