react里面的this_深入解读 React 组件中的 "this"

其实很早就发过这篇文章，可能是因为是我当时是用英文写的，没人看，所以这次给大家翻译了。希望这篇文章能让你有所收获。

动机

如果你熟悉 React.js, 你一定知道知道，如果你像下面这样写事件监听函数，浏览器一定会给你报语法错误

// JSX

class Test extends React.Component {

handleClick () {

this.setState({});

}

render () {

return

}

}

此时如果你点击 button 按钮，浏览器就会告诉你 Cannot read property 'setState' of undefined

我们知道你可以通过 bind 方法或者箭头函数来强制绑定 this 来避免这个问题。我们在下面的章节中会提到箭头函数。

或者

handleClick = () => {

this.setState({});

}

聪明的你应该了解，如果 this 没有绑定到当前对象，那么浏览器就会报错。而且你也知道如何来绑定 this 。但是你考虑过下面几个问题吗？此时 this 到底指向了谁？是 undefined 还是全局对象，比如 window？(根据前面提到的浏览器报错信息，答案显然是 undefined)

为什么 React 组件的实例会失去指向它本身的 this 指向？

这是 JavaScript 语言本身导致的还是 React 的内部某些原因导致的呢？

自我探索

在进行自我探索之前，让我们看一下官方文档是怎么说的：这并不是 React 自身的行为；这是因为函数在 JS 中就是这么工作的。通常情况下，如果你不通过在方法后面加 () 比如 onClick={this.handleClick} ，你应该 bind 这个方法。

因此，上一节的最后一个问题解决了。this 的行为和 React 无关，这是一个 JS 语言本身的特性。

现在，我们来看一下下面两段代码，然后思考一下输出结果是什么。如果你不确定输出结果是什么，你可以在 Node.js 或者 Chrome 浏览器中跑一下试一试。

代码一：

// 使用 ES6