ES6 系列之 Babel 将 Generator 编译成了什么样子？

0109981

本文就是简单介绍下 Generator 语法编译后的代码。

Generator

function* helloWorldGenerator() {
  yield hello;
  yield world;
  return ending;
}

我们打印下执行的结果：

var hw = helloWorldGenerator();

console.log(hw.next()); // {value: hello, done: false}
console.log(hw.next()); // {value: world, done: false}
console.log(hw.next()); // {value: ending, done: true}
console.log(hw.next()); // {value: undefined, done: true}

Babel

具体的执行过程就不说了，我们直接在 Babel 官网的 图片[1]-ES6 系列之 Babel 将 Generator 编译成了什么样子？-技术鸭(jishuya.cn)

图中 +@@toStringTag:s = Generator 的就是 Gp，+@@toStringTag:s = GeneratorFunction 的就是 GeneratorFunctionPrototype。

构建关系链的目的在于判断关系的时候能够跟原生的保持一致，就比如：

function* f() {}
var g = f();
console.log(g.__proto__ === f.prototype); // true
console.log(g.__proto__.__proto__ === f.__proto__.prototype); // true

为了简化起见，我们可以把 Gp 先设置为一个空对象，不过正如你在上图中看到的，next()、 throw()、return() 函数都是挂载在 Gp 对象上，实际上，在完整的编译代码中，确实有为 Gp 添加这三个函数的方法：

// 117 行
function defineIteratorMethods(prototype) {
  [next, throw, return].forEach(function(method) {
    prototype[method] = function(arg) {
      return this._invoke(method, arg);
    };
  });
}

// 406 行
defineIteratorMethods(Gp);

为了简单起见，我们将整个 mark 函数简化为：

runtime.mark = function(genFun) {
  var generator = Object.create({
    next: function(arg) {
      return this._invoke(next, arg)
    }
  });
  genFun.prototype = generator;
  return genFun;
};

wrap 函数

除了设置关系链之外，mark 函数的返回值 genFun 还作为了 wrap 函数的第二个参数传入：

function helloWorldGenerator() {
  return regeneratorRuntime.wrap(
    function helloWorldGenerator$(_context) {
      ...
    },
    _marked,
    this
  );
}

我们再看下 wrap 函数：

function wrap(innerFn, outerFn, self) {
  var generator = Object.create(outerFn.prototype);
  var context = new Context([]);
  generator._invoke = makeInvokeMethod(innerFn, self, context);

  return generator;
}

所以当执行 var hw = helloWorldGenerator(); 的时候，其实执行的是 wrap 函数，wrap 函数返回了 generator，generator 是一个对象，原型是 outerFn.prototype, outerFn.prototype 其实就是 genFun.prototype， genFun.prototype 是一个空对象，原型上有 next() 方法。

所以当你执行 hw.next() 的时候，执行的其实是 hw 原型的原型上的 next 函数，next 函数执行的又是 hw 的 _invoke 函数：

generator._invoke = makeInvokeMethod(innerFn, self, context);

innerFn 就是 wrap 包裹的那个函数，其实就是 helloWordGenerato$ 函数，呐，就是这个函数：

function helloWorldGenerator$(_context) {
  while (1) {
    switch ((_context.prev = _context.next)) {
      case 0:
        _context.next = 2;
        return hello;

      case 2:
        _context.next = 4;
        return world;

      case 4:
        return _context.abrupt(return, ending);

      case 5:
      case end:
        return _context.stop();
    }
  }
}

而 context 你可以直接理解为这样一个全局对象：

var ContinueSentinel = {};

var context = {
  done: false,
  method: next,
  next: 0,
  prev: 0,
  abrupt: function(type, arg) {
    var record = {};
    record.type = type;
    record.arg = arg;

    return this.complete(record);
  },
  complete: function(record, afterLoc) {
    if (record.type === return) {
      this.rval = this.arg = record.arg;
      this.method = return;
      this.next = end;
    }

    return ContinueSentinel;
  },
  stop: function() {
    this.done = true;
    return this.rval;
  }
};

每次 hw.next 的时候，就会修改 next 和 prev 属性的值，当在 generator 函数中 return 的时候会执行 abrupt，abrupt 中又会执行 complete，执行完 complete，因为 this.next = end 的缘故，再执行就会执行 stop 函数。

我们来看下 makeInvokeMethod 函数：

var ContinueSentinel = {};

function makeInvokeMethod(innerFn, self, context) {
  var state = start;

  return function invoke(method, arg) {

    if (state === completed) {
      return { value: undefined, done: true };
    }

    context.method = method;
    context.arg = arg;

    while (true) {

      state = executing;

      var record = {
        type: normal,
        arg: innerFn.call(self, context)
      };
      if (record.type === normal) {

        state = context.done
          ? completed
          : yield;

        if (record.arg === ContinueSentinel) {
          continue;
        }

        return {
          value: record.arg,
          done: context.done
        };

      }
    }
  };
}

基本的执行过程就不分析了，我们重点看第三次执行 hw.next() 的时候:

第三次执行 hw.next() 的时候，其实执行了

this._invoke(next, undefined);

我们在 invoke 函数中构建了一个 record 对象：

var record = {
  type: normal,
  arg: innerFn.call(self, context)
};

而在 innerFn.call(self, context) 中，因为 _context.next 为 4 的缘故，其实执行了:

_context.abrupt(return, ending);

而在 abrupt 中，我们又构建了一个 record 对象：

var record = {};
record.type = return;
record.arg = ending;

然后执行了 this.complete(record)，

在 complete 中，因为 record.type === return

this.rval = ending;
this.method = return;
this.next = end;

然后返回了全局对象 ContinueSentinel，其实就是一个全局空对象。

然后在 invoke 函数中，因为 record.arg === ContinueSentinel 的缘故，没有执行后面的 return 语句，就直接进入下一个循环。

于是又执行了一遍 innerFn.call(self, context)，此时 _context.next 为 end, 执行了 _context.stop(), 在 stop 函数中：

this.done = true;
return this.rval; // this.rval 其实就是 `ending`

所以最终返回的值为:

{
  value: ending,
  done: true
};

之后，我们再执行 hw.next() 的时候，因为 state 已经是 completed 的缘故，直接就返回 { value: undefined, done: true}

不完整但可用的源码

当然这个过程，看文字理解起来可能有些难度，不完整但可用的代码如下，你可以断点调试查看具体的过程：

(function() {
  var ContinueSentinel = {};

  var mark = function(genFun) {
    var generator = Object.create({
      next: function(arg) {
        return this._invoke(next, arg);
      }
    });
    genFun.prototype = generator;
    return genFun;
  };

  function wrap(innerFn, outerFn, self) {
    var generator = Object.create(outerFn.prototype);

    var context = {
      done: false,
      method: next,
      next: 0,
      prev: 0,
      abrupt: function(type, arg) {
        var record = {};
        record.type = type;
        record.arg = arg;

        return this.complete(record);
      },
      complete: function(record, afterLoc) {
        if (record.type === return) {
          this.rval = this.arg = record.arg;
          this.method = return;
          this.next = end;
        }

        return ContinueSentinel;
      },
      stop: function() {
        this.done = true;
        return this.rval;
      }
    };

    generator._invoke = makeInvokeMethod(innerFn, context);

    return generator;
  }

  function makeInvokeMethod(innerFn, context) {
    var state = start;

    return function invoke(method, arg) {
      if (state === completed) {
        return { value: undefined, done: true };
      }

      context.method = method;
      context.arg = arg;

      while (true) {
        state = executing;

        var record = {
          type: normal,
          arg: innerFn.call(self, context)
        };

        if (record.type === normal) {
          state = context.done ? completed : yield;

          if (record.arg === ContinueSentinel) {
            continue;
          }

          return {
            value: record.arg,
            done: context.done
          };
        }
      }
    };
  }

  window.regeneratorRuntime = {};

  regeneratorRuntime.wrap = wrap;
  regeneratorRuntime.mark = mark;
})();

var _marked = regeneratorRuntime.mark(helloWorldGenerator);

function helloWorldGenerator() {
  return regeneratorRuntime.wrap(
    function helloWorldGenerator$(_context) {
      while (1) {
        switch ((_context.prev = _context.next)) {
          case 0:
            _context.next = 2;
            return hello;

          case 2:
            _context.next = 4;
            return world;

          case 4:
            return _context.abrupt(return, ending);

          case 5:
          case end:
            return _context.stop();
        }
      }
    },
    _marked,
    this
  );
}

var hw = helloWorldGenerator();

console.log(hw.next());
console.log(hw.next());
console.log(hw.next());
console.log(hw.next());
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
技术文章
喜欢就支持一下吧
点赞981 分享
jishuya的头像-技术鸭(jishuya.cn)
适合练手的10个前端实战项目(附源码）-技术鸭(jishuya.cn)
适合练手的10个前端实战项目(附源码）
适合练手的10个前端实战项目(附源码）
2年前 747
显示器无法显示灰色 Win10 无法找到 英特尔 显卡控制面板-技术鸭(jishuya.cn)
显示器无法显示灰色 Win10 无法找到 英特尔 显卡控制面板
显示器无法显示灰色 Win10 无法找到 英特尔 显卡控制面板
2年前 554
Windows 10 企业版 LTSC 安装 Microsoft Store-技术鸭(jishuya.cn)
Windows 10 企业版 LTSC 安装 Microsoft Store
Windows 10 企业版 LTSC 安装 Microsoft Store
2年前 509
使用 Axios 发送 PUT 请求-技术鸭(jishuya.cn)
使用 Axios 发送 PUT 请求
使用 Axios 发送 PUT 请求
2年前 463
YOLOv5 在 COCO 数据集上预训练的物体检测架构和模型系列-技术鸭(jishuya.cn)
YOLOv5 在 COCO 数据集上预训练的物体检测架构和模型系列
YOLOv5 在 COCO 数据集上预训练的物体检测架构和模型系列
2年前 351
在 Node.js 中发送 HTTP 请求-技术鸭(jishuya.cn)
在 Node.js 中发送 HTTP 请求
在 Node.js 中发送 HTTP 请求
2年前 314
相关推荐
适合练手的10个前端实战项目(附源码）-技术鸭(jishuya.cn)
适合练手的10个前端实战项目(附源码）
适合练手的10个前端实战项目(附源码）
2年前 747
显示器无法显示灰色 Win10 无法找到 英特尔 显卡控制面板-技术鸭(jishuya.cn)
显示器无法显示灰色 Win10 无法找到 英特尔 显卡控制面板
显示器无法显示灰色 Win10 无法找到 英特尔 显卡控制面板
2年前 554
Windows 10 企业版 LTSC 安装 Microsoft Store-技术鸭(jishuya.cn)
Windows 10 企业版 LTSC 安装 Microsoft Store
Windows 10 企业版 LTSC 安装 Microsoft Store
2年前 509
使用 Axios 发送 PUT 请求-技术鸭(jishuya.cn)
使用 Axios 发送 PUT 请求
使用 Axios 发送 PUT 请求
2年前 463
YOLOv5 在 COCO 数据集上预训练的物体检测架构和模型系列-技术鸭(jishuya.cn)
YOLOv5 在 COCO 数据集上预训练的物体检测架构和模型系列
YOLOv5 在 COCO 数据集上预训练的物体检测架构和模型系列
2年前 351
在 Node.js 中发送 HTTP 请求-技术鸭(jishuya.cn)
在 Node.js 中发送 HTTP 请求
在 Node.js 中发送 HTTP 请求
2年前 314
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容

默认头像
热榜文章
适合练手的10个前端实战项目(附源码）-技术鸭(jishuya.cn)
747人已阅读
适合练手的10个前端实战项目(附源码）
TOP1
显示器无法显示灰色 Win10 无法找到 英特尔 显卡控制面板-技术鸭(jishuya.cn)
显示器无法显示灰色 Win10 无法找到 英特尔 显卡控制面板
2年前554人已阅读
TOP2
Windows 10 企业版 LTSC 安装 Microsoft Store-技术鸭(jishuya.cn)
Windows 10 企业版 LTSC 安装 Microsoft Store
2年前509人已阅读
TOP3
使用 Axios 发送 PUT 请求-技术鸭(jishuya.cn)
使用 Axios 发送 PUT 请求
2年前463人已阅读
TOP4
YOLOv5 在 COCO 数据集上预训练的物体检测架构和模型系列-技术鸭(jishuya.cn)
YOLOv5 在 COCO 数据集上预训练的物体检测架构和模型系列
2年前351人已阅读
TOP5
在 Node.js 中发送 HTTP 请求-技术鸭(jishuya.cn)
在 Node.js 中发送 HTTP 请求
2年前314人已阅读
TOP6