请求说明React中Babel支持类属性箭头函数的实现方式

首先给你确认：你说的没错，原生ES6确实不支持类属性语法，包括你写的myProp = () => {...}这种写法，它属于ES提案（具体是Class Fields提案）里的特性，并非ES6的标准内容。而React项目里能正常用，完全是Babel在背后做了转译工作。

接下来给你拆解Babel的实现逻辑，以及它和普通类方法的差异：

1. Babel如何支持类属性语法？ #

Babel本身默认不会处理这类非标准语法，需要通过对应的插件来启用——早期是@babel/plugin-proposal-class-properties，现在在Babel 7+的预设（比如@babel/preset-react或者@babel/preset-env开启相关配置）里已经包含了这个插件，所以React项目里不用单独配置就能用。

当Babel遇到类属性写法时，会把它转译为ES6标准能理解的代码。比如你写的：

class Question {
  myProp = () => { return 'Hello, world!'; }
  myFunc() { return 'Hello, world!'; }
}

Babel会把它转译成类似这样的代码：

class Question {
  constructor() {
    // 箭头函数类属性被放到构造函数里，作为实例的自有属性
    this.myProp = () => { return 'Hello, world!'; };
  }

  // 普通类方法依然挂在原型上
  myFunc() { return 'Hello, world!'; }
}

2. 箭头函数类属性和普通类方法的核心差异 #

从转译后的代码就能看出两者的本质区别：

• 普通类方法myFunc：是挂载在Question.prototype上的，所有实例共享同一个方法；调用时的this取决于调用方式（比如如果在React组件里把它作为事件回调，不bind的话this会丢失）。
• 箭头函数类属性myProp：是每个实例创建时在构造函数里生成的独立函数，因为箭头函数本身不绑定this，它的this会继承自构造函数执行时的上下文（也就是当前实例），所以永远指向实例本身，不用手动绑定this——这也是React里常用它来做事件回调的原因。

3. 为什么你在Babel Try it out里测试不支持？ #

那是因为默认的Babel配置没有开启Class Fields提案的支持，你需要在配置里添加@babel/plugin-proposal-class-properties插件，或者选择包含该插件的预设（比如React预设），才能正常转译这种写法。

内容的提问来源于stack exchange，提问作者isar