Question

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

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

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

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

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

Answer 1

您似乎在谈论class fields proposal：

字段声明

使用ESnext字段声明提议，上面的示例可以写为
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);
在上面的示例中，您可以看到使用语法x = 0声明的字段。您还可以将没有初始值设定项的字段声明为x。通过预先声明字段，类定义变得更加自我记录;实例经历较少的状态转换，因为声明的字段始终存在。

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

虽然这在Babel中编译得很好（使用es2015默认值）

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

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

1 个答案: