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

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, 因为无论如何, 最后一个 yield 以后至少还能执行一次.

接着继续调用 next

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

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

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

总结

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

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

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

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

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

next, return, throw

next 参数

function* myGenerator(): Generator<string, void, number> {
  const value = (yield 'value1') + 1;
  console.log('value', value); // 2
}

const iterator = myGenerator();
const { value, done } = iterator.next(); // value = value1
iterator.next(1);

当调用 next 的时候可以传入参数. 这个参数会替换掉上一次的 yield.

上面这个例子, 当第二次调用 next 时传入了 number 1.

这时执行回到上一次停止的 yield 断点. 然后把 yield 'value1' 替换成传入的 number 1

接着代码继续执行.

这就是它的运行顺序. 有一点点的绕, 但是你只要记住它就是一个断点, 分段执行的函数. 这样就比较容易了解了.

return

function* myGenerator(): Generator<string, void, number> {
  const value = (yield 'value1') + 1;
  console.log(`won't run into here...`);
  yield 'value2';
  console.log('value', value); // 2
}

const iterator = myGenerator();
const { value, done } = iterator.next(); // value = value1
iterator.return();

return 的作用的打断执行, 和我们平常在函数内写 return 是一样的.

当 iterator.return 调用时, yield 'value1' 就变成了 return. 所以下一行的 console, 和后续的 yield 都不会执行了.

throw

function* myGenerator(): Generator<string, void, number> {
  try {
    const value = (yield 'value1') + 1;
  } catch {
    console.log('catch');
    return;
  }
  console.log(`won't run into here...`);
  yield 'value2';
  console.log('value', value); // 2
}

const iterator = myGenerator();
const { value, done } = iterator.next(); // value = value1
iterator.throw('error');

throw 会让 yield 'value' 变成一个 error, 可以通过 try catch 捕获. 是否要中断或者继续返回 yield 由函数内部决定.

外面依然可以判断 done 和或者到 value.

Generator 函数作为 Iterable 属性

Iterable 的条件是需要一个 Symbol.iterator 的方法, 返回 Iterator

返回 Iterator 的方法, 不就是 Generator 函数吗? 所以可以这样写

const dimension = {
  width: 100,
  height: 200,

  // 古老的写法
  // [Symbol.iterator]: function* () {
  //   yield this.width;
  //   yield this.height;
  // },

  // 现代的写法
  *[Symbol.iterator]() {
    yield this.width;
    yield this.height;
  }
};

for(const value of dimension)
{
  console.log(value); // 100, 200
}

class 版本

class Dimension implements Iterable<number> {
  constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
  }
  width: number;
  height: number;

  *[Symbol.iterator]() {
    yield this.width;
    yield this.height;
  }
}
const [width, height] = new Dimension(100, 200);
console.log(width, height);

*yield

*yield 可以返回另一个 Generator

function* anotherGenerator() {
  yield 'b';
  yield 'c';
}

function* myGenerator() {
  yield 'a';
  yield* anotherGenerator(); // 返回另一个 Generator
  yield 'd';
}

const iterator = myGenerator();
for (const value of iterator) {
  console.log(value); // a, b, c, d
}

它的使用方式和效果类似于

['a', ...['b', 'c'], 'd']

总结

es6 的许多特性在写业务代码时不会经常用到. 但是如果写 UI 组件, 做封装, 做架构的话, 那使用这些特性就会更干净, 直观.

当遇到一个过程, 你想切分阶段来执行 (但顺序保留), 那么 Generator 函数是最合适的.