Javascript 类方法与属性

我见过使用 Javascript 类的代码使用以下形式（例如 React）：

class UserProfile extends Component {
  state = {
    open: false
  }

  handleOpen = () => {
    this.setState({ open: true })
  }
}

Why is handleOpen作为一个属性实现，该属性设置为一个函数，而不是类似：

class UserProfile extends Component {
  state = {
    open: false
  }

  handleOpen() {
    this.setState({ open: true })
  }
}

提前致谢！

这也是一个函数，但它被称为箭头函数并且工作方式与“传统”实现略有不同。它是随 ECMAScript 6 引入的。

这是什么MDN docs says:

箭头函数表达式的语法比函数表达式并且不绑定自己的this, 论据, super, or 新目标。这些函数表达式最适合非方法函数，并且不能用作构造函数。

主要好处之一是您不需要绑定this到该函数，因为箭头函数没有自己的this object:

在箭头函数之前，每个新函数都定义了自己的 this 值

这保证了范围安全；不可能使用不正确的this意外地。可以说它的可读性也稍高一些。

然而，一个缺点是箭头函数是匿名的，这意味着当代码中出现错误时，很难进行堆栈跟踪。但是对于 React 应用程序，我们可以使用 devtool:'cheap-module-eval-source-map ' 从 babel 轻松找到堆栈跟踪中的错误。