JavaScript class中定义生成器方法详解

在 JavaScript 的 class 中定义生成器方法

在 JavaScript 的 class 中定义生成器方法，实际上就是在方法名前加一个星号（*），这一语法简单洗练，但背后隐藏着若干值得关注的细节。该方法会返回一个 Generator 对象，允许你通过 yield 暂停执行，并在需要时恢复——这对于处理大量数据或懒加载场景极为实用。

我们先来看一个基础写法示例：只要在方法名前加上 *，即可定义一个生成器方法。它既可以是实例方法（通过实例调用），也可以是静态方法（通过类名调用）：

class Counter {
  constructor(start = 0) {
    this.current = start;
  }

  // 实例生成器方法
  *countUp(times) {
    for (let i = 0; i < times; i++) {
      yield this.current++;
    }
  }

  // 静态生成器方法
  static *range(from, to) {
    for (let i = from; i < to; i++) {
      yield i;
    }
  }
}

// 使用实例生成器
const c = new Counter(10);
for (const val of c.countUp(3)) {
  console.log(val); // 10, 11, 12
}

// 使用静态生成器
for (const n of Counter.range(0, 3)) {
  console.log(n); // 0, 1, 2
}

注意 this 的行为

生成器方法中的 this 指向调用它的实例（或者类本身），这与普通方法保持一致。不过有一个关键点：生成器函数不会立即执行，只有当你首次调用 next() 或者进入 for...of 循环时，它才会真正开始运行。因此，不要指望在定义时就能拿到任何计算值。

另外，有几个容易踩坑的地方：

• 不能使用箭头函数取代 function*——箭头函数本身不支持 yield。
• yield 关键字仅能在生成器函数内部使用，若在外部使用将直接引发语法错误。
• 生成器方法本身不能是异步的（async *method() 是合法语法，但那属于异步生成器，需配合 await 和 for await...of，用途完全不同）。

常见用途场景

生成器方法最擅长的是“按需产出数据”，避免一次性构建大型数组，非常适合惰性求值（lazy evaluation）逻辑。例如：

• 遍历树形结构：遍历 DOM 节点、嵌套对象等，无需将所有节点塞入数组，边遍历边 yield。
• 分页请求：每次 yield 一页结果，数据流式处理，内存友好。
• 状态机或有限步骤流程：每步 yield 当前状态，方便追踪与调试。
• 模拟无限序列：例如斐波那契数列、自然数序列，理论上可以无限 yield 下去，但不会撑爆内存。

简而言之，生成器方法允许你以同步的代码风格处理异步或延迟加载的逻辑，既提升了编码体验，也保障了运行效率。