我见过使用 Javascript 类的代码使用以下形式（例如 React）：
class UserProfile extends Component {
state = {
open: false
}
handleOpen = () => {
this.setState({ open: true })
}
}
为什么被handleOpen实现为一个属性，它被设置为一个函数而不是类似的东西：
class UserProfile extends Component {
state = {
open: false
}
handleOpen() {
this.setState({ open: true })
}
}
提前致谢！
这也是一个函数，但它被称为箭头函数，其工作方式与“传统”实现略有不同。它是在 ECMAScript 6 中引入的。
这是MDN 文档所说的：
箭头函数表达式的语法比函数表达式短，并且不绑定自己的this、arguments、super或new.target。这些函数表达式最适合非方法函数，它们不能用作构造函数。
主要好处之一是您不需要绑定this到该函数，因为箭头函数没有自己的this对象：
在箭头函数之前，每个新函数都定义了自己的 this 值
这保证了范围安全；不可能this偶然使用不正确的。可以说它也稍微更具可读性。
然而，一个缺点是箭头函数是匿名的，这意味着当你的代码出现错误时，很难进行堆栈跟踪。但是对于 React 应用程序，我们可以使用 devtool:'cheap-module-eval-source-map ' 从 babel 中轻松找到堆栈跟踪中的错误。
这是关于this你的方法内部的上下文。如果您像第二个示例一样实现它，this则不会引用组件实例，而是使用第一个示例中的箭头函数this引用组件实例。（由于没有使用React.createClass）。
对于您的第二个示例，您必须this.handleOpen = this.handleOpen.bind(this)在构造函数中进行。
编辑：有关详细信息，arrow functions请参阅Chris.