定时器中 this 指向修改实现方法和原理讲解

定时器属于全局 window ，window.setTimeout(); window.setInterval(); 普通函数的调用，this 指向它的调用者，所以这也就是为什么 定时器当中的 this 指向 window 的原因。

点击一个 div 延迟改变盒子的背景色

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

运行以上代码，程序报错 Uncaught TypeError: this.style is undefined 原因在于 定时器中的 this 指向 window ，而 this 应该指向事件绑定对象 box。
以下三种方法都可以修改定时器中的 this 指向：

1. 变量替换

原理： 定义一个新的变量，并赋值为 this，从而替代 this，这个变量一般命名为 _that / that /

实现：将定时器外面的 this （指向 box）赋值给新变量，用新变量替代 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. 箭头函数

原理：箭头函数中的 this 是静态的，this 始终指向函数声明时所在作用域下的 this 值。

实现：用箭头函数替代定时器中的匿名函数，而箭头函数声明时所在的块级作用域中的 this 指向 box，所以箭头函数中的 this 也指向 box，达到目的。

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

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

3. bind() 方法

原理：bind() 可以修改函数中 this 指向（注：这里不用 call()、apply() 是由于这两个方法在修改函数中的 this 指向的同时，还会进行函数调用，这里只需修改 this 指向，不需要调用函数 ）。

实现：在定时器中的匿名函数后面添加 bind() ,将匿名函数中的 this 指向由 window 改为 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>