setInterval第一次不执行与setInterval内函数为普通函数与箭头函数 this指向问题

最新推荐文章于 2024-08-12 17:40:33 发布

不能被吃掉的蚂蚁

最新推荐文章于 2024-08-12 17:40:33 发布

阅读量2k

点赞数 1

分类专栏： js基础文章标签： js javascript

本文链接：https://blog.csdn.net/wallace_yang/article/details/111885480

版权

js基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

setInterval第一次不执行与setInterval内函数为普通函数与箭头函数 this指向问题

setInterval第一次不执行

setInterval第一次不执行只要调用setInterval前执行以下函数就行（就这样就行，不用想什么骚操作），
千万不要听网上不负责任的博客说 setInterval(getNewTime(), 5000);这样也可以，这样是不行的！！！这样只会执行一次，5秒后根本不执行！！！

setInterval内函数为箭头函数时 this指向

1.根据箭头函数的this的规则：箭头函数的this看外层函数的this，如果外层函数还是箭头函数则继续向上找。
此处setInterval为箭头函数时this指向为vueComponent对象

//timeContral是写在vue methods里的，因此下面的console输出的是vueComponent对象
timeContral() {
     
     var getNewTime = ()=>{
         var timeStr = new Date();
         var year = timeStr.getFullYear();
         var month = timeStr.getMonth() + 1;
         var day = timeStr.getDate();
         var hours = timeStr.getHours();
         var minutes = timeStr.getMinutes();
         this.timeText = year + '年' + month + '月' + day + '日' + ' ' + hours + ':' + minutes;
         console.log(this,'箭头函数this');//VueComponent对象
      };
      getNewTime();
      setInterval(getNewTime, 5000);//这里千万不要写成getNewTime();
  },

## setInterval内函数为普通函数时 this指向

2.此时this指向全局对象window，因此需要声明_this才能获取到vue中的data

timeContral() {
    var _this = this;
    var getNewTime = function(){
        var timeStr = new Date();
        var year = timeStr.getFullYear();
        var month = timeStr.getMonth() + 1;
        var day = timeStr.getDate();
        var hours = timeStr.getHours();
        var minutes = timeStr.getMinutes();
        _this.timeText = year + '年' + month + '月' + day + '日' + ' ' + hours + ':' + minutes;
        console.log(this,'普通函数this');
    };
    getNewTime();//此处this输出为undefined
    setInterval(getNewTime, 5000);//此处this输出为window对象
},