Bind this of the current scope for callback functions in other cases such as timers and delayers

Front scene

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

 You want to access the current... In the callback function of the delayer Vue What about the instance ？

The way 1 Extra variable （ Not recommended ）

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

 Extra variables created , It is not recommended to use .

The way 2 Arrow function

mounted() {
    
    console.log("this",this);
    setTimeout(
      ()=>{
    
        console.log(" Arrow function ",this);
      },
      1000
    );
},

 Use the arrow function ,this Is in the parent scope this, At the same time, the arrow function arguments It is also in the parent scope arguments.

The way 3 Use bind

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