Generator 实现

Generator 是 ES6 中新增的语法，和 Promise 一样，都可以用来异步编程

  1. // 使用 * 表示这是一个 Generator 函数
  2. // 内部可以通过 yield 暂停代码
  3. // 通过调用 next 恢复执行
  4. function* test() {
  5.   let a = 1 + 2;
  6.   yield 2;
  7.   yield 3;
  8. }
  9. let b = test();
  10. console.log(b.next()); // >  { value: 2, done: false }
  11. console.log(b.next()); // >  { value: 3, done: false }
  12. console.log(b.next()); // >  { value: undefined, done: true }

从以上代码可以发现，加上 * 的函数执行后拥有了 next 函数，也就是说函数执行后返回了一个对象。每次调用 next 函数可以继续执行被暂停的代码。以下是 Generator 函数的简单实现

  1. // cb 也就是编译过的 test 函数
  2. function generator(cb) {
  3.   return (function() {
  4.     var object = {
  5.       next: 0,
  6.       stop: function() {}
  7.     };
  9.     return {
  10.       next: function() {
  11.         var ret = cb(object);
  12.         if (ret === undefined) return { value: undefined, done: true };
  13.         return {
  14.           value: ret,
  15.           done: false
  16.         };
  17.       }
  18.     };
  19.   })();
  20. }
  21. // 如果你使用 babel 编译后可以发现 test 函数变成了这样
  22. function test() {
  23.   var a;
  24.   return generator(function(_context) {
  25.     while (1) {
  26.       switch ((_context.prev = _context.next)) {
  27.         // 可以发现通过 yield 将代码分割成几块
  28.         // 每次执行 next 函数就执行一块代码
  29.         // 并且表明下次需要执行哪块代码
  30.         case 0:
  31.           a = 1 + 2;
  32.           _context.next = 4;
  33.           return 2;
  34.         case 4:
  35.           _context.next = 6;
  36.           return 3;
  37.         // 执行完毕
  38.         case 6:
  39.         case "end":
  40.           return _context.stop();
  41.       }
  42.     }
  43.   });
  44. }