javascript - 生成器函数如何在 Javascript 中工作？

Question

我从一篇文章中读到这行代码，它们展示了函数生成器的工作流程。

var foo, f;

foo = function* () {
  console.log('generator 1');
  console.log('yield 1', yield 'A');
  console.log('generator 2');
  console.log('yield 2', yield 'B');
  console.log('generator 3');
};

f = foo();

console.log('tick 1');
console.log(f.next('a'));
console.log('tick 2');
console.log(f.next('b'));
console.log('tick 3');
console.log(f.next('c'));
console.log('tick 4');
console.log(f.next('d'));

这是终端中的日志:

tick 1
generator 1
{ value: 'A', done: false }
tick 2
yield 1 b
generator 2
{ value: 'B', done: false }
tick 3
yield 2 c
generator 3
{ value: undefined, done: true }
tick 4
{ value: undefined, done: true }

但是我找不到容易理解这个流程的方法，这有点奇怪。如果有人对这个问题有简单的处理方法，请帮忙解释一下。

Answer 1

基础知识

调用生成器函数返回 iterator .

在迭代器上调用 .next() 会返回以下形式的对象:

{ 
  value // current value of the iterator, 
  done  // boolean indicating if iteration is finished 
}

在生成器提供的迭代器上调用.next()，从生成器中的当前暂停点运行代码到下一个yield，在下一个 yield 上暂停生成器并推出任何 yield 值作为从 .next() 方法返回的值迭代器的，在上面显示的对象形式中。

您传递给此迭代器的 .next() 的任何内容都将从生成器中当前暂停的 yield 返回。

由于生成器在第一次调用 .next() 时不会在 yield 处暂停，因此传递给第一个 .next()< 的任何内容 只是被忽略了。

如果没有剩余的 yield 语句，无论函数返回什么，都将是最后一个迭代器值。

此时 done 标志将设置为 true 并且对 .next() 的任何进一步调用将返回相同的值。

---

运行示例

因此，就您的代码而言，这就是正在发生的事情。我将注释掉执行步骤后发生的每一行。

第一步

f = foo();

此时，迭代器已创建并存储在 f 中，但生成器中的代码尚未实际运行。所以我们有:

function* () {
  console.log('generator 1');
  console.log('yield 1', yield 'A');
  console.log('generator 2');
  console.log('yield 2', yield 'B');
  console.log('generator 3');
};

第 2 步

f.next('a'); // returns { value: 'A', done: false }

这会在生成器中运行代码直到第一个 yield 并将生成的 'A' 推出 .next()称呼。传递到 .next() 中的 'a' 被忽略，因为它是第一次调用(如上所述)。

注释掉运行的行给我们留下:

function* () {
  // console.log('generator 1');
  console.log('yield 1', PAUSE_POINT); // we're paused on the `yield`. Essentially half of this line is done
  console.log('generator 2');
  console.log('yield 2', yield 'B');
  console.log('generator 3');
};

第 3 步

f.next('b'); // return { value: 'B', done: false }

这从第一个 yield(第一个 PAUSE_POINT)返回 'b' 并将代码运行到下一个 yield，将 'B' 从迭代器中推出。

删除运行留下的行:

function* () {
  // console.log('generator 1');
  // console.log('yield 1', 'b'); // this PAUSE_POINT returns 'b'
  // console.log('generator 2');
  console.log('yield 2', PAUSE_POINT); // no we're paused here
  console.log('generator 3');
};

第四步

f.next('c'); // { value: undefined, done: true }

它将 'c' 从暂停的 yield 中传递出去，并且由于没有更多的 yield 剩余，运行到结束生成器并推出生成器返回的任何内容，在您的情况下，这只是一个隐式的 return undefined。由于我们到达了生成器函数的末尾，done 标志被设置为 true。

function* () {
  // console.log('generator 1');
  // console.log('yield 1', 'b'); // this PAUSE_POINT returns 'b'
  // console.log('generator 2');
  // console.log('yield 2', 'c'); // this PAUSE_POINT returns 'c'
  // console.log('generator 3');
  // here we have an implicit return undefined;
};

第 5 步及后续

f.next('d'); // { value: undefined, done: true }

在生成器完成后对 .next() 的任何调用(即 done 为 true)只会返回最后一个值。将 'd' 传递到此方法中不再有任何用处。

---

附加示例

var foo = function* () {
  console.log('first call to next runs to yield #1');
  var a = yield 'A'; // this yield pushes 'A' and returns 'a'
  console.log('second call to next runs to yield #2');
  var b = yield 'B'; // this yield pushes 'B' and returns 'b'
  console.log('third call to next runs to the end of the generator ');
  // there's no return statement here so we are returning undefined
};

var f = foo();

console.log(f.next('this gets ignored')); // { value: 'A', done: false }
console.log(f.next('a'));                 // { value: 'B', done: false }
console.log(f.next('b'));                 // { value: undefined, done: true }

// any further call just returns whatever the last returned value was
console.log(f.next('this also gets ignored since we are done')); // { value: undefined, done: true }