JavaScript类方法与属性

  • Z时代
  • 2024-01-10
  • 分类：问答

我已经看到使用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引入的。

这是

所说的：

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

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

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

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

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

eval-source-map从babel轻松找到我们堆栈跟踪中的错误。

以上是 JavaScript类方法与属性 的全部内容， 来源链接： utcz.com/qa/398834.html

回到顶部