【问题标题】:How does a generator function work in Javascript?生成器函数如何在 Javascript 中工作?
【发布时间】:2017-01-17 20:50:32
【问题描述】:

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

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 }

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

【问题讨论】:

  • 你觉得什么特别奇怪?
  • 在您了解您的代码如何形成AST 之后,该顺序完全正确且非常清晰。

标签: javascript ecmascript-6 generator


【解决方案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() 的任何进一步调用都将返回相同的值。


运行示例

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

第 1 步

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');
};

第 4 步

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

从暂停的yield 中传递'c' 并且由于没有更多yields 离开,运行到生成器的末尾并推出生成器返回的任何内容,在您的情况下这只是一个隐含的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() 的任何调用(即donetrue)只会返回最后一个值。将'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 }

【讨论】:

  • 这对我来说有点奇怪,这就是为什么console.log('yield 1', yield 'A'); 行没有完全执行,只是执行yield 'A' 以将'A'传递给结果对象,@987654371 @string 下次执行
  • 因为这是定义生成器的方式。这是一个暂停功能,在每个yield 上都会暂停,无论它是在行的中间还是在自己的行上。当您拨打.next() 时,您转到下一个yield 并暂停。然后,如果您再次拨打next,您将从暂停的位置开始并再次执行相同的操作。仔细查看我的答案的 step3,其中 PAUSE_POINT 变为 'b'
  • 我明白了!感谢您的详细解释。太好了!
  • @Karim 很高兴能帮上忙:D
【解决方案2】:

简单的解释是yield关键字停止执行代码,yield就像断点,下一个生成器调用在上一个断点之后执行代码到下一个断点(如果有的话)。所以生成器函数被部分调用,在我的示例代码中检查 cmets。

var gen=function*(){
  
  //1.start of first call next()
  
  yield "A";//1.here first next() ends
  
  //2.start of second call next();
  
  yield "B";//2.here end second next();
  
  //3.start of third call next()
  
  
  yield "C";//3.end of third next() call
  
  //NEXT AFTER THIRD. here every next() after third starts
  
  //no code no yield so value is undefined
  
  //here every next() after third ends
  
  
}();

console.log(gen.next().value);//A
console.log(gen.next().value);//B
console.log(gen.next().value);//C
console.log(gen.next().value);//undefined

【讨论】:

    猜你喜欢
    • 2017-02-12
    • 1970-01-01
    • 2014-10-03
    • 2012-07-08
    • 2020-08-11
    • 1970-01-01
    • 2016-10-05
    • 2010-12-15
    • 1970-01-01
    相关资源
    最近更新 更多