This point in the JavaScript timer

Using the timer in JS (setinterval,settimeout), it is easy to encounter this point of the problem.

Directly on the example:

1 varname = ' My name is window ';2 varobj = {3Name: ' My name is obj ',4Fn:function () {5         varTimer =NULL;6 clearinterval (timer);7Timer = SetInterval (function () {8Console.log ( This. name); My name is window9}, 1000)Ten     } One}

Here, you can see from this.name that this is pointing to window.

If there are no special pointers, the setinterval and settimeout callback functions in this direction are window. This is because the JS timer method is defined under window. However, in a lot of scenarios, you need to change the direction of this. Here is a summary of several:

1. The most common method: to save this as a variable in an external function, use the variable in the callback function instead of using this directly.

1 varname = ' My name is window ';2 varobj = {3Name: ' My name is obj ',4Fn:function () {5         varthat = This;6         varTimer =NULL;7 clearinterval (timer);8Timer = SetInterval (function () {9Console.log (That.name);//my name is objTen}, 1000) One     } A}

var is added to fn = this; Use this instead of this in the callback function. This method is the most common and most widely used.

2, using the Bind () method (Bind () to ES5 standard, low version IE has compatibility problems, can be introduced es5-shim.js resolution)

Bind () acts like call and apply, both of which modify this point. But call and apply is to modify this point after the function executes immediately, and bind returns a new function that creates a new function with the same body as the original function, and this in the new function points to the incoming object.

1 varname = ' My name is window ';2 varobj = {3Name: ' My name is obj ',4Fn:function () {5         varTimer =NULL;6 clearinterval (timer);7Timer = SetInterval (function () {8Console.log ( This. name);//my name is obj9}.bind ( This), 1000)Ten     } One}

Here's why you can't use call and apply because call and apply are not returning functions, they are executing functions immediately, so you lose the function of the timer.

3. Use the arrow function of ES6: The maximum function of the arrow function is this point.

1 varname = ' My name is window ';2 varobj = {3Name: ' My name is obj ',4Fn:function () {5         varTimer =NULL;6 clearinterval (timer);7Timer = SetInterval (() = {8Console.log ( This. name);//my name is obj9}, 1000)Ten     } One}

The arrow function does not have its own this, and its this inherits from the scope of the outer function. So, in this case, the this in the timer callback function is the this that inherits the FN. Of course, the arrow function also has a compatibility problem, if it is compatible with the low version of IE, need to use Babel compilation, and introduced Es5-shim.js can.

This point in the JavaScript timer