En el temporizador, esto apunta al método de implementación de la modificación y la explicación del principio.

El temporizador pertenece a la ventana global, y window.setTimeout(); window.setInterval();cuando se llama a una función normal, esta apunta a su llamador, por eso esto en el temporizador apunta a la ventana.

Hacer clic en un div retrasa el cambio del color de fondo del cuadro

//以下是错误是否，运行报错
 	<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>

Ejecute el código anterior, el programa informa un error. Uncaught TypeError: this.style is undefinedLa razón es que esto en el temporizador apunta a la ventana, y esto debería apuntar al cuadro de objeto de enlace de eventos.
Los siguientes tres métodos pueden modificar el puntero this en el temporizador:

1. Sustitución de variables

Principio: Defina una nueva variable y asigne esta para reemplazar esta. Esta variable generalmente se llama _eso / eso /

Realización: asigne esto (señalando el cuadro) fuera del temporizador a una nueva variable, y use la nueva variable para reemplazar la función de esto.

	<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. Funciones de flecha

Principio: la función this in the arrow es estática, y siempre apunta al valor this en el ámbito donde se declara la función.

Realización: Reemplace la función anónima en el temporizador con una función de flecha, y esto en el ámbito de nivel de bloque donde se declara la función de flecha apunta al cuadro, por lo que esto en la función de flecha también apunta al cuadro, logrando el objetivo.

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

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

3. método enlazar()

Principio: bind() puede modificar este punto en la función (nota: call() y apply() no se usan aquí porque estos dos métodos también realizarán llamadas de función mientras modifican este punto en la función, aquí solo es necesario modificar este punto, no es necesario llamar a la función).

Implementación: agregue bind() después de la función anónima en el temporizador, y cambie este punto en la función anónima de la ventana al cuadro.

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

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