ES6生成器详解

生成器的基本概念

ES6引入的生成器（Generator）是一种特殊的函数，可以在执行过程中暂停和恢复。生成器通过function*语法定义，内部使用yield关键字暂停函数执行并返回一个值。生成器函数的返回值是一个迭代器对象，可以通过调用next()方法逐步执行。

生成器的核心特性包括：

• 惰性求值：仅在需要时生成值。
• 双向通信：通过next()方法向生成器传递参数。
• 协程支持：实现复杂的异步流程控制。

生成器的语法与定义

生成器函数通过function*声明，函数体内使用yield表达式暂停执行。例如：

function* generatorExample() {
  yield 1;
  yield 2;
  return 3;
}
const gen = generatorExample();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: true }

yield关键字将值返回给调用者，同时暂停函数执行。调用next()时，生成器从上次暂停处继续执行，直到遇到下一个yield或return。

生成器的执行流程

生成器的执行分为多个阶段：

1. 调用生成器函数返回一个迭代器对象，但不会立即执行函数体。
2. 首次调用next()时，生成器函数执行到第一个yield，返回{ value: yieldedValue, done: false }。
3. 后续调用next()从上次暂停处继续执行，直到下一个yield或return。
4. 遇到return时返回{ value: returnedValue, done: true }，标记生成器结束。

双向通信与参数传递

生成器支持通过next()方法传递参数，参数会成为当前yield表达式的返回值。例如：

function* twoWayCommunication() {
  const x = yield 1;
  const y = yield x + 2;
  return y;
}
const gen = twoWayCommunication();
console.log(gen.next());    // { value: 1, done: false }
console.log(gen.next(10));  // { value: 12, done: false }
console.log(gen.next(5));   // { value: 5, done: true }

第一次调用next()时传入的参数会被忽略，因为生成器尚未开始执行。后续调用next(arg)时，arg会成为当前yield的返回值。

生成器的错误处理

生成器可以通过throw()方法在内部抛出错误。错误会被生成器内部的try-catch捕获。例如：

function* errorHandling() {
  try {
    yield 1;
  } catch (e) {
    console.log('Caught:', e);
  }
}
const gen = errorHandling();
gen.next();
gen.throw(new Error('Something went wrong')); // 输出: Caught: Error: Something went wrong

如果生成器未捕获错误，错误会传播到调用者。

生成器与迭代协议

生成器实现了迭代器协议（Iterator Protocol），因此可以直接用于for...of循环。例如：

function* iterableExample() {
  yield 1;
  yield 2;
  yield 3;
}
for (const value of iterableExample()) {
  console.log(value); // 依次输出 1, 2, 3
}

生成器返回的迭代器也支持return()和throw()方法，用于提前终止迭代或抛出错误。

生成器的组合与委托

生成器可以通过yield*表达式委托给另一个生成器或可迭代对象。例如：

function* generatorA() {
  yield 1;
  yield 2;
}
function* generatorB() {
  yield* generatorA();
  yield 3;
}
for (const value of generatorB()) {
  console.log(value); // 依次输出 1, 2, 3
}

yield*会依次迭代被委托的生成器或可迭代对象的值，类似于展开操作。

生成器与异步编程

生成器可以用于简化异步编程，尤其是与Promise结合时。例如：

function* asyncGenerator() {
  const result = yield fetch('https://api.example.com/data');
  console.log(result);
}
function runAsync(generator) {
  const gen = generator();
  function handle(result) {
    if (result.done) return;
    result.value.then(data => {
      handle(gen.next(data));
    });
  }
  handle(gen.next());
}
runAsync(asyncGenerator);

这种模式是Async/Await的前身，通过生成器实现异步代码的同步编写风格。

生成器的常见用例

1. 惰性计算：生成器可以按需生成值，节省内存。例如斐波那契数列：

   function* fibonacci() {
     let [a, b] = [0, 1];
     while (true) {
       yield a;
       [a, b] = [b, a + b];
     }
   }
   const fib = fibonacci();
   console.log(fib.next().value); // 0
   console.log(fib.next().value); // 1
   

2. 状态机：生成器可以清晰实现状态机逻辑。例如：

   function* stateMachine() {
     let state = 'start';
     while (true) {
       switch (state) {
         case 'start':
           state = yield 'started';
           break;
         case 'running':
           state = yield 'running';
           break;
       }
     }
   }
   

3. 数据流处理：生成器可以用于处理大型数据流，避免一次性加载所有数据。

生成器的局限性

1. 性能开销：生成器的暂停和恢复机制比普通函数调用更耗时。
2. 调试复杂性：生成器的执行流程可能难以跟踪，尤其是在复杂异步场景中。
3. 兼容性：虽然现代浏览器支持生成器，但在旧环境中可能需要Babel等工具转译。

生成器的高级技巧

1. 递归生成器：生成器可以通过yield*实现递归调用。例如遍历树结构：

   function* traverseTree(node) {
     yield node.value;
     if (node.left) yield* traverseTree(node.left);
     if (node.right) yield* traverseTree(node.right);
   }
   

2. 无限序列：生成器可以表示无限序列，如随机数生成器：

   function* randomNumbers() {
     while (true) {
       yield Math.random();
     }
   }
   

3. 协程调度：生成器可以实现简单的协程调度器，控制多个生成器的执行顺序。

生成器与其他特性的对比

1. 生成器 vs 异步函数：Async/Await是生成器的语法糖，更简洁但灵活性较低。
2. 生成器 vs Promise：生成器可以暂停执行等待Promise解决，适合复杂异步流程。
3. 生成器 vs 迭代器：生成器是迭代器的工厂，简化了迭代器的实现。

生成器的底层实现

生成器的暂停和恢复通过执行上下文保存实现。每次调用next()时：

• 生成器的局部变量和执行位置被保存。
• 控制权交还给调用者。
• 下次调用时恢复之前的执行状态。

这种机制依赖于JavaScript引擎的内部实现，通常通过状态机和闭包模拟。

总结

ES6生成器是一种强大的控制流程工具，适用于惰性计算、异步编程和复杂状态管理。通过yield和next()实现双向通信，结合yield*支持组合和委托。尽管Async/Await在简单场景中更常用，生成器仍为特定问题提供独特的解决方案。