2020-07-02 Vue中setInterval和setTimeout执行函数中的this的指向

直接上答案：this指向window

普通函数中的this指向是变化的，谁调用的指向谁，因为 setInterval 和 setTimeout 是挂载在 window 上的，相当于window.setInterval 和 window.setTimeout，所以执行函数中的 this 指向 window

解决办法：

1.用箭头函数

原理：箭头函数中的this指向是固定不变（定义函数时的指向）

2.用 setInterval 和 setTimeout 的第三个参数

原理：setInterval 和 setTimeout 的第三个参数可以作为执行函数的参数，具体用法看下文代码

3.保存一下 this

看代码

export default {
  data: function() {
    return {
      message: "hey jude"
    };
  },
  mounted() {
    setInterval(function() {
      console.log(this.message);//undefined
    }, 500);

    setInterval(() => {
      console.log(this.message);//hey jude
    }, 500);

    setInterval(
      _this => {
        console.log(_this.message);//hey jude
      },
      500,
      this
    );

    let that = this;
    setInterval(() => {
      console.log(that.message);//hey jude
    }, 500);
  }
};