Javascript class 方法与属性

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

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

MDN docs 是这样说的：

An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

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

Until arrow functions, every new function defined its own this value

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

然而，一个缺点是箭头函数是匿名的，这意味着当您在 code.But 对于 React 应用程序我们可以使用 devtool:[=30] 中遇到错误时，很难进行堆栈跟踪=] 从 babel 中轻松找到我们堆栈跟踪中的错误。

Answer 2

这与您的方法中 this 的上下文有关。如果您像第二个示例一样实现它，this 将不会引用组件实例，而是像第一个示例中那样使用箭头函数 this 引用组件实例。（由于没有使用 React.createClass）。

对于第二个示例，您必须在构造函数中执行 this.handleOpen = this.handleOpen.bind(this)。

编辑：有关 arrow functions 的详细信息，请参阅 Chris 的答案。

Javascript class 方法与属性

Javascript class methods versus properties

javascript

reactjs

ecmascript-next