ES6读书简记·Generator

CY 2019年01月09日 702次浏览

Generator函数看上去好像是一个挺抽象的语法，理解成遍历器生成函数就不那么抽象了。

基本概念

Generator函数会返回一个遍历器对象，除了function后面的*号和函数体内使用的yield，其余和普通函数没有区别。

// 这里的*号在function和函数名的中间，没有位置的限制，但是通常写在function后面
function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

hw.next()
// 返回一个对象，value就是当前yield表达式的值，done意思是是否结束了。
// { value: 'hello', done: false }

hw.next()
// { value: 'world', done: false }

hw.next()
// { value: 'ending', done: true }

hw.next()
// { value: undefined, done: true }

// done为true后再继续调用next会一直返回 { value: undefined, done: true }
hw.next() 
// { value: undefined, done: true }

和普通函数的调用方法一样，但是调用后并不会执行，返回一个Iterator 对象，需要调用next()方法来移动指针。

一个yield表示一个状态，return也表示一个状态。

每次移动指针都会从上一个yield运行到下一个yield或者return，也可以理解为yield表达式是暂停执行的标记，而next()方法可以恢复执行。

yield和return的区别

yield，函数会暂停执行，下一次再从该位置继续向后执行，而return语句不具备位置记忆的功能，只能执行一次return，但是能执行任意多个yield，yield只能用在Generator函数中，用在其他地方会报错的。

Generator 函数可以不用yield表达式，这时就变成了一个单纯的暂缓执行函数，调用next函数才会执行。

yield还可以下面这样用：

// yield表达式如果用在另一个表达式之中，必须放在圆括号里面
console.log('Hello' + (yield 123));
// yield表达式用作函数参数或放在赋值表达式的右边，可以不加括号。
foo(yield 'a', yield 'b'); // OK
let input = yield; // OK

因为Generator函数返回一个Iterator，所以可以赋值给对象的Symbol.iterator属性，让对象拥有遍历器。

next 方法的参数

yield表达式本身没有返回值，或者说总是返回undefined。next()方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。

next方法第一次调用的时候传递的参数是会被忽略的，没有任何作用的。如果非要在第一次next()中就传递参数，可以将这个Generator函数包装起来，在包装函数里面提前调用一次next()。

for...of 循环遍历Generator

for...of遍历的时候不需要手动使用next()函数，而且不会遍历出return的返回值的，也就是不会遍历到done为true的值。

可以利用这个特性，为原生的对象（不能使用for...of）写一个方法，让其能使用for...of遍历，也可以将Generator函数赋值给对象的Symbol.iterator属性。

除了for...of，...运算符，Array.from()都需要这样去遍历。

Generator.prototype.throw()

Generator 函数返回的遍历器对象，都有一个throw()方法，可以在函数体外抛出错误，然后在 Generator 函数体内捕获。

throw()方法可以接受一个参数，该参数会被catch语句接收，建议抛出Error对象的实例。

如果 Generator 函数内部没有部署try...catch代码块，那么throw方法抛出的错误，将被外部try...catch代码块捕获。

如果 Generator 函数内部和外部，都没有部署try...catch代码块，那么程序将报错，直接中断执行

throw()方法抛出的错误要被内部捕获，前提是必须至少执行过一次next()方法。

throw()方法被捕获以后，会附带执行下一条yield表达式。也就是说，会附带执行一次next()方法。

throw命令与g.throw()方法是无关的，两者互不影响。

Generator 函数体外抛出的错误，可以在函数体内捕获；反过来，Generator 函数体内抛出的错误，也可以被函数体外的catch捕获。

一旦 Generator 执行过程中抛出错误，且没有被内部捕获，就不会再执行下去了。如果此后还调用next()方法，将返回一个value属性等于undefined、done属性等于true的对象，即 JavaScript 引擎认为这个 Generator 已经运行结束了。

Generator.prototype.return()

Generator 函数返回的遍历器对象，还有一个return()方法，可以返回给定的值，并且终结遍历 Generator 函数，相当于value属性变为了return()方法的参数（不提供参数就是undefined），done属性变为了true

如果 Generator 函数内部有try...finally代码块，且正在执行try代码块，那么return()方法会导致立刻进入finally代码块，执行完以后，整个函数才会结束。

next()、throw()、return() 的共同点

可以理解为：

  • next()是将yield表达式替换成一个值。
  • throw()是将yield表达式替换成一个throw语句。
  • return()是将yield表达式替换成一个return语句。

yield* 表达式

用来在一个 Generator 函数里面执行另一个 Generator 函数。

yield*后面的 Generator 函数（没有return语句时），不过是for...of的一种简写形式，完全可以用后者替代前者。反之，在有return语句时，则需要用var value = yield* iterator的形式获取return语句的值

如果yield*后面跟着一个数组，由于数组原生支持遍历器，因此就会遍历数组成员

任何数据结构只要有 Iterator 接口，就可以被yield*遍历

作为对象属性的 Generator 函数

可以简写为下面的形式

let obj = {
  * myGeneratorMethod() {
    ···
  }
};

Generator 函数的this

Generator 函数也不能跟new命令一起用，会报错

以下代码可以让 Generator 函数返回一个正常的对象实例，既可以用next()方法，又可以获得正常的this

function* gen() {
  this.a = 1;
  yield this.b = 2;
  yield this.c = 3;
}

// 这样就可以使用new了
function F() {
  // 这样就绑定了this了
  return gen.call(gen.prototype);
}

var f = new F();

f.next();  // Object {value: 2, done: false}
f.next();  // Object {value: 3, done: false}
f.next();  // Object {value: undefined, done: true}

f.a // 1
f.b // 2
f.c // 3

应用

  • 异步操作的同步化表达（改写回调函数）

    可以将回调函数要执行的内容放在yield后面，这样就可以在其他地方通过next的方式来让函数继续执行

  • 部署 Iterator 接口

    可以为任意的对象部署Iterator接口

  • 可以视为数组结构

Generator的异步

原文链接

ES6诞生以前的异步编程解决方法

  • 回调函数
  • 事件监听
  • 发布/订阅
  • Promise 对象

有了Generator函数后，可以用yield关键字去分割多个异步操作。通过调用next的方式来继续执行。但是这存在一个问题，Generator需要知道异步执行什么时候执行完成了。

于是可以在Generator函数中使用Promise对象，让其执行next()函数后返回的对象中的value属性为一个Promise，然后执行了next()函数以后需要使用value来判断什么时候异步执行完成了，然后再次调用next()方法，执行剩下的操作。

但是这样带来的问题是，异步代码写的很简洁，但是流程管理很不方便。

Trunk函数

大概的形式是这样的

Trunck(函数)(参数)(回调) // 实现方式查看原文

传入一个函数，将其变为Trunck函数，相当于将参数和回调拆开了。

这样的话写异步函数就可以直接写成下面这样

let returnValue = yield asyncFunctionThunk(参数);

上面的asyncFunctionThunk是经过Trunck转换过的函数，然后在里面传入参数，这样执行next后返回的value是一个可以传入回调的函数，在里面传入回调，就可以知道异步的状态了，然后将回调接收到的值，在传递给下一个next()方法，这样就可以让returnValue接收到值了。

大概写成下面这样:

g.next().value(function (err, data) {
  if (err) throw err;
  g.next(data).value(function (err, data) {
    if (err) throw err;
    g.next(data);
  });
});

这样就可以按照上面的代码，写成递归的形式来自动执行Generator中的异步函数了。

除了Trunk，还有其他的方式，例如：co模块

用法大概是下面的样子

var co = require('co');
co(gen);

使用 co 的前提条件是，Generator 函数的yield命令后面，只能是 Thunk 函数或 Promise 对象，或者是Promise 对象数组

同样也是利用递归的方式来自动执行Generator函数。

Generator和Stream

上一篇： ES6读书简记·Iterator & for...of