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

比眉伴天荒 2022-04-12 12:13 173阅读 0赞

前两天接到一个需求，需要在一个弹窗的“确定”按钮上加一个倒计时，试过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，问题果然出在这里！

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