Nov 28 2014

ES6 generator函数与co一瞥

最近开始学（其实就是玩）ES6里的generator/yield，以及传说中的co。

首先，我不会Python，所以这是第一次接触generator/yield这种非阻塞编程方式。其次，我虽然知道也很喜欢C#中的async/await，虽然了解一点coroutine/goroutine，但是都没用这两种方式写过正经代码，所以应该说不会受它们影响太多。

话不多说先来看一看generator函数。

JS里的generator函数是一种特殊类型的函数，通过

function* gen(){
  // ...
}

来声明一个generator函数，它和普通函数不一样，虽然在generator函数里也可以return，但是实际上generator函数的返回值是一个迭代器，所以generator函数是一个生成迭代器的函数，相信这就是generator function名字的由来吧。
这里举一个最简单的例子

function* simpleGen(){
  return 'hehe';
}
var iter = simpleGen();

iter就是一个迭代器，我们可以通过next()所返回的“迭代指针”来迭代，比如：

var it = iter.next();
console.log(it.value); // 'hehe'
console.log(it.done);  // true

好嘛，因为上面的simpleGen里面直接return了，所以所谓迭代其实只是看了个最终结果。
那么问题来了，怎么才能让它被迭代起来呢！！
这时候就要配合yield使用了，yield的意思就是“让步”，在它跟C#里面的yield return差不多。外部调用一次调用next，内部进行一步迭代。每一次yield就是所谓的一步，这时迭代器将会暂停工作，并保留所有现场。而代码执行的机会会被让给外部，直到再次next，迭代将会继续。

function* gen2(){
  yield 1;
  yield 2;
  return 'hehe';
}
var iter = gen2();
iter.next(); // { value: 1, done: false }
iter.next(); // { value: 2, done: false }
iter.next(); // { value: 'hehe', done: true }

这个迭代器的概念很像STL里的迭代器，有木有？但是，这时候你会说这特么手工next也能叫迭代？好的，ES6提供了for of语法

for (var it of gen2()){
  console.log(it);
}

上面的代码会输出1和2，但是不会输出’hehe’，我不知道是设计如此还是暂时没实现……而且资料上显示的是for (let xx of xxx)才对啊导演。
算了不管了，继续。yield字面意思就是“让步”，可以把执代码执行“让”给yield表达式来执行，而不是像写异步回调那样接着往下执行。呵呵呵呵，真是好人啊。yield *后接一个迭代器就可以把执行的机会让给这个迭代器，比如

function* gen1(){
  yield '1-1';
  yield '1-2';
}
function* gen2(){
  yield '2-1';
  yield* gen1();
  yield '2-2';
}

for (var it of gen2()){
  console.log(it);
}

执行结果就是

2-1
1-1
1-2
2-2

那么问题来了，不是说这货能用来控制流程，简化异步代码的编写吗？

答案就是next可以接收一个参数，它会作为这一次迭代的yield表达式在generator function当中的返回值。

因为直到迭代器被再次调用next为止，generator function都是处于“让步”状态，所以这段时时间内其实可以做任何操作，不论是同步的还是异步的。

所以如果我们发现yield表达式的返回值是一个异步操作，比如thunk、Promise、迭代器、generator function，那就意味着这个操作还没有真正执行完！

那么问题就简单了，yield不知道它是异步的，但是我们知道啊，甚至我们可以“万物皆异步”，我们可以让异步操作结束后再调用next，从而实现化腐朽为神奇变异步为同步。

function randomDelay(){
  var time = Math.random() * 500;
  return function(callback){
    setTimeout(callback.bind(this, time), time);
  };
}
function* genSlowly(){
  for (var i=0; i<10; ++i){
    console.log(i);
    console.log(yield randomDelay());
  }
}
async(genSlowly);

通过上面的代码我们希望实现打印一个数，调用一个异步操作randomDelay()，它的作用是随机延迟一段时间（你可以把它YY成一个ajax请求），然后通过回调函数的方式返回这个延迟毫秒数，在外层的genSlowly()函数能够拿到这个返回值，并且打印。
于是大概是这么个意思……

function async(gen){
  var iter = gen();
  function nextStep(it){
    if (it.done) return; // 迭代已完成
    if (typeof it.value === 'function'){
      // 收到的是一个thunk函数，需要等它完成的时候再继续迭代
      it.value(function(ret){
        nextStep(iter.next(ret)); // 把thunk的回调参数传入next，作为yield表达式的返回值
      });
    }else{
      // 收到的是一个值，进行下一步迭代
      nextStep(iter.next(it.value));
    }
  }

  nextStep(iter.next()); // 开始迭代
}

呵呵呵呵，成功了，虽然看起来很弱的样子。

通过对一个generator函数进行“处理”，我们可以改变它本身“迭代器生成器”的作用，用来做流程控制，这听起来真是相当蛋疼啊。不知道是谁发明的，但真是个很有创意的想法。

这时候co就不难理解了，它可以将一个generator函数处理成一个异步操作。这样你可以在generator函数里面使用yield来实现“顺序调用，异步执行”的效果，。在co的4.0版本里它完全采用了Promise，它会将最终返回值作为参数传递到promise的then当中。

例子：

function someThingSlow(callback){
  setTimeout(callback, 500);
}
co(function* fibonacciGenerator(){
  var p1 = 0, p2 = 1;
  while (true){
    var cur = p1 + p2;
    console.log(cur);
    p1 = p2;
    p2 = cur;

    yield someThingSlow;
  }
});
// 每隔一秒打印斐波那契数列，无限

再来个例子，JS程序员梦寐以求的sleep

function sleep(ms){
  return function(callback){
    setTimeout(callback, ms);
  };
}
co(function* (){
  console.log('1');
  yield sleep(1000);
  console.log('2');
});

呵呵呵呵，就是这么无聊……

但是！co之所以这么火并不是没有原因的，当然不是仅仅实现sleep这么无聊的事情，而是它活生生的借着generator/yield实现了很类似async/await的效果！这一点真是让我三观尽毁刮目相看。

至于具体怎么用，受篇幅限制，还是等下一篇文章再详细说明吧。嗯，我相信你已经感觉到这是又一个《有生之年》系列了（逃

编程