为定时器和延时器等其它情况的回调函数绑定当前作用域的this

前置场景

mounted() {
    
    console.log("this",this);
    setTimeout(function() {
    
      console.log("init",this);
    },1000);
},

想在延时器的回调函数中访问当前Vue实例怎么办？

方式1 额外变量（不推荐）

mounted() {
    
    console.log("this",this);
    const that = this;
    setTimeout(function() {
    
      console.log("init",that);
    },1000);
}

创建了多余的变量，不推荐使用。

方式2 箭头函数

mounted() {
    
    console.log("this",this);
    setTimeout(
      ()=>{
    
        console.log("箭头函数",this);
      },
      1000
    );
},

使用箭头函数，this是父作用域中的this,当时与此同时箭头函数中arguments也是父作用域中arguments。

方式3 使用bind

mounted() {
    
    console.log("this",this);
    setTimeout(function () {
    
        console.log("bind",this);
      }.bind(this),1000)
},