将类中的普通函数改为ES6箭头函数时出现语法错误，求原因

这个问题我之前碰到过好几次，本质是类字段语法的兼容性问题，具体可以从两个核心原因来分析：

1. 运行环境不支持ES2022类字段语法 #

你写的draw = () => { ... }这种箭头函数作为类实例属性的写法，是ES2022（ES13）才正式被纳入ECMAScript标准的特性。而普通类方法draw() {}早在ES6（ES2015）就被支持了，所以之前能正常运行。

如果你的代码运行在：

• 旧版浏览器（比如Chrome 90之前、Firefox 88之前的版本）
• Node.js版本低于16.14.0
  这些环境的JS引擎根本识别不了这种在类顶层直接赋值的语法，自然会抛出Unexpected token =的错误。

2. 转译工具未配置支持类字段 #

如果你用了Babel、TypeScript这类转译工具，但没有正确配置来支持类字段语法，也会触发这个错误：

• 对于Babel，你需要安装并启用@babel/plugin-proposal-class-properties插件，或者使用包含该插件的预设（比如@babel/preset-env并把目标环境设置为需要兼容的版本）。
• 对于TypeScript，需要在tsconfig.json中把target设置为ES2022及以上，或者开启useDefineForClassFields配置（视TS版本而定）。

临时替代方案（兼容旧环境） #

如果暂时没法升级环境或配置转译工具，又想实现绑定this的效果（这应该是你改用箭头函数的核心需求），可以在构造函数里手动绑定普通方法：

class YourClass {
  constructor() {
    // 手动绑定this，确保draw方法中的this始终指向类实例
    this.draw = this.draw.bind(this);
  }

  draw() {
    // 原函数内容
  }
}

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