JavaScript类方法与属性

小编典典

reactjs

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

提前致谢！

阅读 392

2020-07-22

共1个答案

小编典典

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

这是
MDN文档
所说的：

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

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

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

这保证了示波器的安全性；不可能this偶然使用不正确的内容。可以说它也更具可读性。

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

2020-07-22