In the timer, this points to the modification implementation method and principle explanation

The timer belongs to the global window, and window.setTimeout(); window.setInterval();when a normal function is called, this points to its caller, so this is why this in the timer points to the window.

Clicking on a div delays changing the background color of the box

//以下是错误是否，运行报错
 	<div class="box"></div>
    <script>
        let box = document.querySelector('.box');

        box.addEventListener('click',function() {
    
    
            setTimeout(function() {
    
    
                this.style.backgroundColor = 'teal'; 
                // 代码报错 由于定时器是全局的，window.setTimeout() 所以 this 指向 window 而非 box ，运行找不到 this 从而报错，可以将匿名函数改写为箭头函数，从而解决 this 指向问题
            },1000);
        })
    </script>

Run the above code, the program reports an error. Uncaught TypeError: this.style is undefinedThe reason is that this in the timer points to window, and this should point to the event binding object box.
The following three methods can modify the this pointer in the timer:

1. Variable substitution

Principle: Define a new variable and assign this to replace this. This variable is generally named _that / that /

Realization: assign this (pointing to box) outside the timer to a new variable, and use the new variable to replace the function of this.

	<div class="box"></div>
    <script>
        let box = document.querySelector('.box');

        box.addEventListener('click',function() {
    
    
            let _that = this; // 将定时器外面的 this(指向 box ) 赋给新变量 _that 用新变量替代 this 进行使用
            setTimeout(function() {
    
    
                _that.style.backgroundColor = 'teal';
            },1000);
        })
       
    </script>

2. Arrow functions

Principle: the this in the arrow function is static, and this always points to the this value under the scope where the function is declared.

Realization: Replace the anonymous function in the timer with an arrow function, and this in the block-level scope where the arrow function is declared points to the box, so this in the arrow function also points to the box, achieving the goal.

	<div class="box"></div>
    <script>
        let box = document.querySelector('.box');

        box.addEventListener('click',function() {
    
    
            setTimeout(() => {
    
    
                this.style.backgroundColor = 'teal';
            },1000);
        })
    </script>

3. bind() method

Principle: bind() can modify the this point in the function (note: call() and apply() are not used here because these two methods will also perform function calls while modifying the this point in the function, here only need to modify this point to, no need to call the function).

Implementation: add bind() after the anonymous function in the timer, and change the this point in the anonymous function from window to box.

<div class="box"></div>
    <script>
        let box = document.querySelector('.box');

        box.addEventListener('click',function() {
    
    
            setTimeout(function() {
    
    
                this.style.backgroundColor = 'teal';
            }.bind(this),1000);
        })
    </script>