javascript - for循环中的函数发生器

Question

我试图更好地理解生成器在 javascript 中的工作方式。

来自 MDN:

The function* declaration (function keyword followed by an asterisk) defines a generator function, which returns a Generator object.

function *range(from, to) {
    var counter = from;
    while(to >= counter) {
        yield counter
        counter++
    }        
}

for (var r of range(5, 10)) {
    console.log( r );
}

// print: 5, 6, 7, 8, 9, 10

我不确定我是如何理解上面代码片段中发生的事情的。

生成器不应该被调用、存储为(生成器)对象，然后由 next() 方法调用。 (如下图)

function *foo () {
      yield 'woo';
 }
 var G = foo();
 console.log( G.next() );

在上面的代码中，第 4 行 var G = foo(); 我不是调用函数并创建新的执行上下文，这应该只返回一个生成器对象(并将其存储在标签 G 下)。

当我在第 5 行调用 next() 方法时，我将调用实际函数 foo。此时，我正在创建一个执行上下文，执行 foo 中的代码并产生字符串 "woo"。

第一个片段究竟应该如何工作？

Answer 1

调用生成器函数将返回一个迭代器(具有.next 函数的对象)，for..of 循环将自动 迭代可迭代对象。虽然您可以预先将迭代器存储在变量中:

const iter = range(5, 10);
for (var r of iter) {
  ...
}

这不是必需的 - 毕竟 for..of 只需要对迭代器的单个引用。

您可以通过将对迭代器的单个引用传递给调用每个 .next 函数的函数来在代码中模仿这一点，直到迭代器耗尽:

function *range(from, to) {
    var counter = from;
    while(to >= counter) {
        yield counter
        counter++
    }        
}

iterate(range(5, 10), num => {
  console.log(num);
});

function iterate(iterator, callback) {
  while (true) {
    const { value, done } = iterator.next();
    if (done) return;
    callback(value);
  }
}

如您所见，在将迭代器传递给 iterate 之前无需将迭代器存储在变量中，就像您可以使用 range(5, 10)直接调用 for..of 循环，因为循环(或函数)的内部会为您完成所有迭代。