关于JavaScript中this的指向问题

this的指向在函数定义的时候是确定不了的，只有在函数被执行被调用的时候才能确定this到底指向谁，一般情况下的this的最终指向的是调用它的对象

比如在全局作用下或者普通函数中this指向的是全局顶级对象window 如下：

  // 我们直接后他打印
        console.log(this);

后台打印输出：

我们看看普通函数this指向谁：

  // 普通函数
        function fn() {
            console.log(this);
        }
        fn()

后台同样输出顶级对象window 因为我们在调用上面函数的时候原本是 window.fn() 只是我们常常省去了调用对象

接下来看看下面的this：

   <button class="b1">开启定时器</button>
    <button class="b2">关闭定时器</button>
    <script>
        var b1 = document.querySelector('.b1')
        var b2 = document.querySelector('.b2')
        b1.addEventListener('click', function() {
            t1 = setInterval(function() {
                    console.log("定时启动中");
                    this.style.backgroundColor = 'blue'
                }, 1000)
                // ---
        })
        b2.addEventListener('click', function() {
            clearInterval(t1)
        })
    </script>

如果直接运行的话会报错：Cannot set properties of undefined (setting 'backgroundColor')

无法设置未定义的属性(设置“backgroundColor”)

我们分析一下 下面的this指向的是window对象的setinterval属性 我们说过一般情况下的this的最终指向的是调用它的对象而setinterval属性的对象就是window 所以this指向了把对象赋值给红色箭头的 t1 变量上 而并不是黄色的箭头 b1

要运行代码我们需要把this改成 t1