在JavaScript类中创建Generator函数时出现Unexpected token function*错误怎么办？

当然可以在类内部创建Generator，你遇到的错误是因为类方法的定义语法错误——类内部定义方法时不需要加function关键字，生成器方法只需要在方法名前添加*即可。

正确的类生成器实例方法写法 #

这是最推荐的方式，生成器方法挂载在类的原型上，所有实例共享，既保持封装性又节省内存：

class MyClass{
  constructor() {
    this.foo = 4;
    this.bar = 5;
  }

  // 去掉function关键字，直接用*前缀定义生成器方法
  * myGenerator() {
    let index = this.foo;
    while(index < this.bar) {
      yield index++;
    }
  }
}

使用方式 #

实例化类后，调用生成器方法得到Generator对象，再通过遍历或next()方法获取值：

const obj = new MyClass();
const gen = obj.myGenerator();

// 方式1：for...of遍历
for (const num of gen) {
  console.log(num); // 输出4
}

// 方式2：手动调用next()
const gen2 = obj.myGenerator();
console.log(gen2.next()); // { value: 4, done: false }
console.log(gen2.next()); // { value: undefined, done: true }

其他可选方案 #

方案1：在构造函数内定义生成器属性 #

如果需要每个实例拥有独立的生成器函数副本（比如需要绑定特定上下文），可以在构造函数内直接定义：

class MyClass{
  constructor() {
    this.foo = 4;
    this.bar = 5;
    
    // 直接定义为实例属性，保留function*语法
    this.myGenerator = function*() {
      let index = this.foo;
      while(index < this.bar) {
        yield index++;
      }
    };
  }
}

方案2：静态生成器方法（适用于静态属性场景） #

如果你的foo和bar是类的静态属性，也可以定义静态生成器方法：

class MyClass{
  static foo = 4;
  static bar = 5;

  static * myGenerator() {
    let index = MyClass.foo;
    while(index < MyClass.bar) {
      yield index++;
    }
  }
}

// 调用方式：直接通过类调用
const gen = MyClass.myGenerator();
console.log(gen.next().value); // 4

错误原因回顾 #

你之前的代码报错是因为类内部的方法定义不允许使用function关键字，不管是普通方法还是生成器方法，都要遵循类方法的简写语法——生成器方法只需要* 方法名()的形式即可。

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