类 中的箭头函数在 chrome 中不受支持，但通过 babel 可以正常工作，为什么？

Question

在 class 中编写箭头函数的正确语法应该是

greet = () => {console.log('greet')}

虽然这在 Babel 中编译良好（默认使用 es2015），但 chrome devtools 会抛出错误。

这让我感到困惑，因为根据 http://caniuse.com/#feat=arrow-functions 它们在 Chrome 中完全受支持。

这是非标准语法吗？如果是，为什么 Babel 支持它。如果没有，我在哪里可以看到支持状态

Answer 1

您似乎在谈论 class fields proposal:

Field declarations

With the ESnext field declarations proposal, the above example can be written as

class Counter extends HTMLElement {
  x = 0;

  clicked() {
    this.x++;
    window.requestAnimationFrame(this.render.bind(this));
  }

  constructor() {
    super();
    this.onclick = this.clicked.bind(this);
  }

  connectedCallback() { this.render(); }

  render() {
    this.textContent = this.x.toString();
  }
}
window.customElements.define('num-counter', Counter);

In the above example, you can see a field declared with the syntax x = 0. You can also declare a field without an initializer as x. By declaring fields up-front, class definitions become more self-documenting; instances go through fewer state transitions, as declared fields are always present.

这是第 3 阶段的提案，与箭头函数无关。任何值都可以分配给字段，包括箭头函数。

---

While this compiles fine in Babel (using es2015 default)

我确定配置了其他插件。由于这是一个提案而不是 ES2016 的一部分，仅 启用 ES2015 预设不会转换此语法。