Javascript类方法与属性

Question

我已经看到使用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 })
  }
}

提前致谢！

Answer 1

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

这是MDN 文档所说的：

箭头函数表达式的语法比函数表达式更短，并且不绑定自己的this、arguments、super或new.target。这些函数表达式最适合非方法函数，它们不能用作构造函数。

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

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

这保证了范围安全；不可能this偶然使用不正确的。可以说它也稍微更具可读性。

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