Generator 是怎么样使用的以及各个阶段的变化如何

Generators 是 JavaScript 中一种特殊类型的函数，可以在执行过程中暂停，并且在需要时恢复执行。它们是通过 function* 关键字来定义的。Generator 函数返回的是一个迭代器对象，通过调用该迭代器对象的 next() 方法来控制函数的执行。在调用 next() 方法时，Generator 函数会执行到下一个 yield 关键字所在的位置，然后将 yield 后面的表达式的值作为返回的对象的 value 属性的值。下面是一个简单的 Generator 函数示例：

javascript复制代码function* generatorFunction() {
  console.log('Step 1');
  yield 1;
  console.log('Step 2');
  yield 2;
  console.log('Step 3');
  return 3;
}
​
const iterator = generatorFunction();
​
console.log(iterator.next()); // 输出: { value: 1, done: false }
console.log(iterator.next()); // 输出: { value: 2, done: false }
console.log(iterator.next()); // 输出: { value: 3, done: true }

上面的示例中，generatorFunction 是一个 Generator 函数，它包含了三个 yield 关键字。调用 generatorFunction 返回的是一个迭代器对象 iterator。然后通过调用 iterator.next() 方法来控制 Generator 函数的执行。Generator 函数会执行到下一个 yield 关键字所在的位置，并返回一个对象，其中 value 属性表示 yield 后面表达式的值，done 属性表示 Generator 函数是否已经执行完毕。

Generator 函数的执行过程可以分为以下几个阶段：

1. 初始化阶段：

   • Generator 函数被调用后，会返回一个指向内部状态的迭代器对象，但并不执行函数体内的代码，这个过程称为初始化阶段。

2. 第一次调用 next() 阶段：

   • 在第一次调用迭代器对象的 next() 方法时，Generator 函数会从函数体开始执行，直到遇到第一个 yield 关键字为止。然后返回 yield 关键字后面表达式的值，并暂停函数的执行。

3. 后续调用 next() 阶段：

   • 在后续调用迭代器对象的 next() 方法时，Generator 函数会从上一次 yield 关键字暂停的地方继续执行，直到遇到下一个 yield 关键字或者 return 语句为止。然后返回 yield 关键字后面表达式的值，并暂停函数的执行。

4. 完成阶段：

   • Generator 函数执行到最后一个 yield 关键字或者 return 语句时，函数执行结束，迭代器对象的 next() 方法会返回一个 done 属性为 true 的对象，表示 Generator 函数执行结束。

Generator 函数的灵活性和可控性使得它在一些场景下非常有用，比如异步编程、数据流控制等