JavaScript – Generator Function

参考

阮一峰 – Generator 函数的语法

 

介绍

Generator Function 是一种特别的函数, 它让函数有一种分阶段执行的能力.

一般的函数, 你调用它, 它执行所有函数内的代码, 就结束了.

但 Generator 函数不同, 它可以只执行一部分的代码, 然后返回, 接着再继续执行未完成部分的代码.

调用者可以选择任何时刻继续执行未完成的部分, 函数要分多少个返回阶段都可以 (甚至是无限).

 

Overview

定义 Generator 函数

function* myGenerator() {
  console.log('do something1...');
  yield 'first return';

  console.log('do something2...');
  yield 'second return';

  console.log('do something3...');
}

Generator 函数的几个特色

1. function* 通过一个星号表示这是一个 Generator 函数

2. 调用 Generator 函数, 会得到一个 Iterator

3. 函数内通过 yield 关键字切分返回阶段

调用 Generator 函数

const iterator = myGenerator();

像调用普通函数一样, 这时会得到一个 Iterator 对象. 

注意: 这个时候, 函数里的代码完全不会被执行.

接着调用 iterator.next 表示开始执行函数

const { value, done } = iterator.next();

于是函数内的这 2 行代码被运行了 (因为这个是第一个 next 调用, 所以会从函数内的第一行代码一直运行到第一个 yield)

console.log('do something1...'); // 执行
yield 'first return'; // 执行

调用执行完成, 就会得到返回值

const { value, done } = iterator.next(); // value = first return, done = false

done = false 是因为函数内任然有未执行的代码.

接着继续调用 next

console.log('do something2...'); // 执行
yield 'second return'; // 执行


const { value: secondReturn, done: secondDone } = iterator.next(); // secondReturn = second return, secondDone = false

这个 next 会从刚才第一个 yield 之后的代码开始执行, 一直到下一个 yield.

secondDone 依然是 false, 因为函数内还有最后一行 console.log('do something3...') 还没被执行.

接着继续调用 next

console.log('do something3...'); // 执行

const { value: thirdReturn, done: thirdDone } = iterator.next(); // thirdReturn = undefined, secondDone = true

因为没有 yield 了, 所以 thirdReturn 是 undefined.

总结

Generator 的职责是定义函数内容, 分段, 返回值.

调用者的职责是控制调用的时机.

上面我给的例子比较简单, 再多次调用 next 的时候是可以传递参数给函数的.

简单理解就是, Generator 函数像是多个函数的 combine (这些函数有一个固定的执行顺序, 但是有着不同的执行时机)

调用者每一次都可以传入不同的参数, 运行不同的阶段, 得到不同的返回结果.