React框架中setTimeout中的this作用域问题

版权声明：本文为博主原创文章，转载时请注明出处。 https://blog.csdn.net/i_dont_know_a/article/details/84759161

前两天接到一个需求，需要在一个弹窗的“确定”按钮上加一个倒计时，试过setInterval，未成功，就想到了用setTimeout，但是其中的this作用域倒是令我困扰了好长时间。

初始大致的结构如下：

// 错误代码
fun() {
    ……
    if (……) {
        ……
    }
    setTimeout(this.fun, 1000);
}

this.fun();

但是问题出现了，第一遍fun函数里的代码能被执行，但是，执行一遍之后就报错了。报错是fun函数不存在，我马上想到了this的问题，又联想到前几天学react的时候学到的数据绑定，于是我给绑了一下：

// 错误代码
fun() {
    ……
    if (……) {
        ……
    }
    setTimeout(this.fun.bind(this), 1000);
}

this.fun();

依然无效……我再一次改代码：

// 错误代码
fun() {
    const self = this;
    ……
    if (……) {
        ……
    }
    setTimeout(self.fun.bind(this), 1000);
}

this.fun();

依然无效……我又改：

// 错误代码
fun() {
    const self = this;
    ……
    if (……) {
        ……
    }
    setTimeout(self.fun.bind(self), 1000);
}

this.fun();

这次终于成功了！！！

随后我才想到真正的问题在于bind所绑定的this到底是不是我所想要的this。

我使用之前的错误代码打印了一下this，结果第一次打印正常，第二次给我打印出了window，问题果然出在这里！

虽然最后问题被解决了，但我还是深深地感受到了自己的菜，试了这么多次才想到原因。