ES6类中箭头函数编写方法及Unexpected token =报错咨询

Hey there! Let's break down why you're seeing that SyntaxError: Unexpected token = error and how to fix it quickly.

为什么会报错？ #

你写的method1 = () => { /* code */ }语法叫做类公共字段，它并不是ES6（ES2015）的标准特性——这个语法是在ES2022才正式被纳入ECMAScript标准的，之前只是一个阶段提案。如果你的JavaScript运行环境（比如旧版Node.js、老浏览器，或者项目没配置转译工具）不支持这个特性，就会抛出这个语法错误。

解决方案 #

这里有几种靠谱的处理方式，你可以根据自己的场景选择：

1. 在constructor中手动绑定箭头函数（ES6标准兼容）

这是最稳妥的ES6原生写法，不需要任何额外工具支持。直接在类的constructor里把箭头函数赋值给实例属性，这样既能保证this始终指向类实例，又完全符合ES6标准：

class ExampleClass {
  constructor() {
    this.method1 = () => {
      // 这里的this会始终指向ExampleClass的实例，不会丢失
      console.log("This is method1", this);
    };
  }
}

2. 用转译工具支持类字段语法（适合项目开发）

如果你的项目已经在用Babel这类转译工具，可以通过添加插件来支持类字段语法：

• 首先安装对应的Babel插件：

  npm install @babel/plugin-proposal-class-properties --save-dev
  

• 然后在你的Babel配置文件（比如.babelrc或babel.config.json）中启用它：

  {
    "plugins": ["@babel/plugin-proposal-class-properties"]
  }
  

配置完成后，转译工具会把类字段语法转换成ES6兼容的代码，解决语法错误。

3. 升级你的运行环境

如果是在Node.js或现代浏览器中运行代码，可以直接升级到支持ES2022的版本：

• Node.js：升级到16.13.0及以上版本（LTS版本更稳定）
• 浏览器：使用Chrome 74+、Firefox 67+、Edge 79+这类现代浏览器，它们原生支持类字段语法

小提醒 #

要注意：类字段写法和constructor赋值的箭头函数，都是实例属性，不会挂载到类的原型上。如果你的方法需要被所有实例共享，那应该使用普通的类原型方法；但如果需要确保this始终绑定到当前实例（比如在事件回调、异步操作中），箭头函数的方式就非常合适。

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