In js , setTimeout and setInterval are both a function used for timing. The following article mainly introduces the this point of setInterval and setTImeout in js . The introduction is very detailed through examples. Friends in need can refer to it. One Get up and take a look.
Preface
js is a single-threaded language. You can use setTimeout() and setInterval() to set the code to run at a specified time. The former is executed after a specified time, and the latter is executed at regular intervals. The two methods are similar.
In practice, when recently wrote a small example of the use of timers, we found in incoming setInterval and setTimeout in function , the function of this points to the window object, described in detail through an example to start with a look.
The following example:
var num = 0;
function Obj (){
this.num = 1,
this.getNum = function(){
console.log(this.num);
},
this.getNumLater = function(){
setTimeout(function(){
console.log(this.num);
}, 1000)
}
}
var obj = new Obj;
obj.getNum();//1 打印的为obj.num，值为1
obj.getNumLater()//0 打印的为window.num，值为0
From the above example, you can see that the this in the function of setTimeout points to the window object. This is because the code called by setTimeout() runs in an execution environment that is completely separate from the function in which it is located . This will lead to the this key contained in these codes . The word will point to the window (or global) object. For details, please refer to MDN setTimeout
But when the passed in setTimeout is not a function , this points to the current object, as in the following example:
var num = 0;
function Obj (){
this.num = 1,
this.getNum = function(){
console.log(this.num);
},
this.getNumLater = function(){
setTimeout(console.log(this.num), 1000)
}
}
var obj = new Obj;
obj.getNum();//1 打印的为obj.num，值为1
obj.getNumLater()//1 打印的为obj.num，值为1
As can be seen from the above two examples, when the parameter passed in setTimeout is a function , this inside the function will point to the window object.
When a function is passed in setTimeout , if you want this to point to the correct value, you can use the following two more common methods to make this point to the correct value:
1. Save the this of the current object as a variable, and the function in the timer uses the closure to access this variable
as follows:
var num = 0;
function Obj (){
var that = this; //将this存为一个变量，此时的this指向obj
this.num = 1,
this.getNum = function(){
console.log(this.num);
},
this.getNumLater = function(){
setTimeout(function(){
console.log(that.num); //利用闭包访问that，that是一个指向obj的指针
}, 1000)
}
}
var obj = new Obj;
obj.getNum();//1 打印的为obj.num，值为1
obj.getNumLater()//1 打印的为obj.num，值为1
This method is to put the reference of the current object in a variable, and the function inside the timer can access this variable, and the current object can naturally be obtained.
2. Use the bind() method
var num = 0;
function Obj (){
this.num = 1,
this.getNum = function(){
console.log(this.num);
},
this.getNumLater = function(){
setTimeout(function(){
console.log(this.num);
}.bind(this), 1000) //利用bind()将this绑定到这个函数上
}
}
var obj = new Obj;
obj.getNum();//1 打印的为obj.num，值为1
obj.getNumLater()//1 打印的为obj.num，值为1
The bind() method is a method on Function.prototype. When the bound function is executed, the bind method will create a new function and use the first parameter as this when the new function is run. In this example, when the function in setTimeout is called, the bind method creates a new function and passes this to the new function. The result of the execution is correct. For the bind method, please refer to MDN bind
The above two methods are more commonly used. Of course, if you use the call or apply method to replace the bind method, the result is correct, but the call method will be executed immediately after the call, so there is no delay effect. The device is useless, so it is recommended to use the above two methods to pass this into setTimeout and setInterval.