前兩天接到一個需求，需要在一個彈窗的“確定”按鈕上加一個倒計時，試過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，問題果然出在這裡！

雖然最後問題被解決了，但我還是深深地感受到了自己的菜，試了這麼多次才想到原因。