ES6中是否可以在类中使用箭头函数？

Question

我的问题很简单。如果我有一个ES6中的类，能否在其中使用箭头函数？

import React, { Component } from 'react';

export default class SearchForm extends Component {

  state = {
    searchText: ''
  }

  onSearchChange = e => {
    this.setState({ searchText: e.target.value });
  }

  handleSubmit = e => {
    e.preventDefault();
    this.props.onSearch(this.query.value);
    e.currentTarget.reset();
  }

  render() {
    return (
      <form className="search-form" onSubmit={this.handleSubmit} >
        <label className="is-hidden" htmlFor="search">Search</label>
        <input type="search"
               onChange={this.onSearchChange}
               name="search"
               ref={(input) => this.query = input}
               placeholder="Search..." />
        <button type="submit" id="submit" className="search-button">
          <i className="material-icons icn-search">search</i>
        </button>
      </form>
    );
  }
}

我之所以问这个问题，是因为即使使用Babel，我的控制台仍然会出现错误。互联网上似乎有很多资源表明你可以做到这一点（其中大部分都是关于使用React进行开发的）。

Babel是否应该执行此操作，并最终得到本地支持？

我收到的错误是在括号前面出现了意外的=符号。

编辑：我忘记提到的原因是要利用类上下文中的this关键字。如果我使用常规函数，我需要将this绑定到函数上。我正在尝试寻找更好的方法。

- tomhughes

---

不，这不是事情的处理方式。正确的方式是使用提供的样例 constructor() {}。 - adelindev

使用React进行开发，并希望在不显式绑定的情况下利用this关键字。 - tomhughes

请参见https://dev59.com/9l0Z5IYBdhLWcg3whAlv，可能是重复的问题。 - le_m

Arrow 'methods'已被提议（目前处于第一阶段草案）纳入标准，网址为：https://tc39.github.io/proposal-class-public-fields/。 - le_m

不要使用箭头函数来定义方法，如果你想让 this 指向对象实例。箭头函数的定义将使用词法 this，而不是对象的 this。这只是滥用箭头函数。它不仅仅是一种语法快捷方式- 它会以一种不合适的方式改变 this 的值，这对于几乎所有方法定义都不合适。当声明方法时，箭头函数根本不是合适的工具。 - jfriend00

Answer 1

为了做到这一点，您需要添加transform-class-properties Babel插件，它允许您拥有自动绑定类方法的功能，就像您正在尝试的那样。

与其他人所建议的不同，这样做确实是有价值的。也就是说，您的类函数自动绑定了类this，而无需在构造函数中手动绑定。

没有transform-class-properties插件，您可以这样做：

export default class SearchForm extends Component {

  constructor(props) {
    super(props)
    this.doSomething = this.doSomething.bind(this)
  }

  doSomething () {
    console.log(this) // <-- 'this' is the class instance
  }
}

使用插件：

export default class SearchForm extends Component {

  doSomething = () => {
    console.log(this) // <-- 'this' is the class instance, no binding necessary
  }
}

这是一篇相当好而简洁地解释了（除其他事项外）的文章：https://medium.com/@joshblack/writing-a-react-component-in-es2015-a0b27e1ed50a。

- Logic Artist

---

这正是在你回答之前我得出的结论，我想要将其引用到类中是为了可以使用“this.setState”并引用类本身。 - tomhughes

不确定。你能否更新一下你的代码示例以便说明吗？ - Logic Artist

已更新，看起来不是使用构造函数吗？ - tomhughes

啊，我从来没有想过这个问题，但是（只要你使用我提到的转换插件），它应该是一样的。这只是定义类属性的更清晰的方式。请参见https://dev59.com/GVoU5IYBdhLWcg3wIkeI - Logic Artist

@jfriend00 在使用React时，我想使用它来修改类本身，即访问this.state并能够访问组件状态。我不确定你所说的对象实例是否适用于此？ - tomhughes

Answer 2

是的，可以在ES6类中使用箭头函数。我注意到你没有在构造函数中调用super，如果你正在扩展和覆盖构造函数，那么你必须这样做。

除此之外，你的代码正确编译为ES5，可以查看这个link在线Babel转换器，其中包含你的示例代码。

看看这个与你类似的问题。

- Tekeste Kidanu

---

即使调用super()，我仍然会收到语法错误，只有在使用Babel的'transform-class-properties'插件时才能正常工作，不确定为什么Babel在线转换器会起作用，除非它已经考虑了这一点并使用了该插件？ - tomhughes

Answer 3

是的，这是可能的。您的代码应该可以工作，您需要检查您的Babel设置，可能配置有误。

在您的示例中，doSomething实际上是类的属性；属性的类型是函数。以下是一个示例，还显示了一种方法，以及对this关键字的使用：

class SearchForm {

  doSomething = () => {
    console.log('I am a property')
  }

  doSomethingElse() {
    console.log('I am a method')
  }

  doBoth() {
    this.doSomething();
    this.doSomethingElse()
  }
}

const form = new SearchForm();
form.doBoth();

你可以在这里实时查看。

- m1kael

---

这个回答没有涉及到使用箭头函数来定义方法，而这似乎是问题所关注的内容。 - jfriend00