JavaScript React setInterval 沒有粗箭頭函數

Question

我正在啟動 React，我看到我可以在 setInterval() 中使用粗箭頭函數設置時鍾：

class Clock extends React.Component {
    constructor(props) {
        super(props)
        this.state = { date: new Date() }
        this.timer = null
    }

    componentDidMount() {
        this.timer = window.setInterval(() => {
            this.setState({ date: new Date() })
        }, 1000)
    }

但是我沒有設法使用常規函數（如下）獲得相同的結果。 我認為它與在常規函數中創建新上下文的“this”關鍵字有關？ 我不知道如何解決這個問題：

componentDidMount() {
    this.timer = window.setInterval(function() {
        this.setState({ date: new Date() })
    }, 1000)
}

感謝您的時間

Answer 1

箭頭函數會自動綁定父作用域的上下文。 但是regular function默認情況下不會這樣做。 為了更改常規函數的上下文，您可以使用如下示例的bind方法。

this.timer = window.setInterval(function() {
    this.setState({ date: new Date() })
}.bind(this), 1000)

Answer 2

這不正是因為新的this是一個普通函數創建（順便說一句，不要混淆的背景和this ），規則定期功能， this包括：

• 在構造函數的情況下是一個新對象
• 嚴格模式下函數調用中的 undefined
• 如果函數作為方法被調用，則為當前對象

您的情況是第三種情況，但訣竅是在使用setInterval或setTimeout ，回調函數被稱為方法，但在全局范圍內（ this == window ）。

經典的方式是保存this一個變量。 因為函數可以訪問創建它的上下文，所以它會記住這個變量：

var self = this;
this.timer = window.setInterval(function() {
    self.setState({ date: new Date() })
}, 1000)

您也可以使用bind