Generator函数 | 前端博客记录

Generator函数时ES6提供的一种异步编程的解决方案。

从语法上来说，可以把Generator函数理解为一个状态机，封装了多个内部状态。执行Generator函数会返回一个遍历器对象。

形式上，Generator函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield语句。

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

const hw = helloWorldGenerator();
// Object [Generator] {}
console.log(hw);

let val
// 当迭代器的值为 { value: undefined, done: true } 时终止遍历
while ((val = hw.next()).value !== undefined) {
// { value: 'hello', done: false }
// { value: 'world', done: false }
// { value: 'ending', done: true }
  console.log(val)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

调用Generator函数，返回一个遍历器对象，代表Generator函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield语句后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。

# yield

Generator函数返回一个迭代器对象，只有调用next方法才会编译下一个内部状态。而yield语句可以实现暂停执行函数的功能。

迭代对象的next方法的运行逻辑如下。

（1）遇到yield语句，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。

（2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield语句。

（3）如果没有再遇到新的yield语句，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。

（4）如果该函数没有return语句，则返回的对象的value属性值为undefined。

需要注意的是，yield语句后面的表达式，只有当调用next方法、内部指针指向该语句时才会执行，因此等于为JavaScript提供了手动的“惰性求值”的语法功能。

yield语句与return语句既有相似之处，也有区别。

相似之处在于，都能返回紧跟在语句后面的那个表达式的值。

区别在于每次遇到yield，函数暂停执行，下一次再从该位置继续向后执行，而return语句不具备位置记忆的功能。一个函数里面，只能执行一次return语句，但是可以执行多次yield语句。正常函数只能返回一个值，因为只能执行一次return；Generator函数可以返回一系列的值，因为可以有任意多个yield。

Generator函数可以不用yield语句，这时就变成了一个单纯的暂缓执行函数。

function* f() {
  console.log('执行了！')
}

var generator = f();

setTimeout(function () {
  generator.next()
}, 2000);

1
2
3
4
5
6
7
8
9

上面代码中，函数f如果是普通函数，在为变量generator赋值时就会执行。但是，函数f是一个Generator函数，就变成只有调用next方法时，函数f才会执行。

另外，yield语句如果用在一个表达式之中，必须放在圆括号里面。

console.log('Hello' + yield); // SyntaxError
console.log('Hello' + yield 123); // SyntaxError

console.log('Hello' + (yield)); // OK
console.log('Hello' + (yield 123)); // OK

1
2
3
4
5

yield语句用作函数参数或赋值表达式的右边，可以不加括号。

foo(yield 'a', yield 'b'); // OK
let input = yield; // OK

1
2

# yield *

如果在Generater函数内部，调用另一个Generator函数，默认情况下是没有效果的。这个就需要用到yield*语句，用来在一个Generator函数里面执行另一个Generator函数。

function* bar() {
  yield 'x';
  yield* foo();
  yield 'y';
}

// 等同于
function* bar() {
  yield 'x';
  yield 'a';
  yield 'b';
  yield 'y';
}

// 等同于
function* bar() {
  yield 'x';
  for (let v of foo()) {
    yield v;
  }
  yield 'y';
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

参考资料

Generator 函数