ES6 系列之 Babel 將 Generator 編譯成了什麼樣子

摘要： function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending'; } 複製程式碼 我們列印下執行的結果： var hw = hel...

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 官網的Try it out 貼上上述程式碼，然後檢視程式碼被編譯成了什麼樣子：

/**
 * 我們就稱呼這個版本為簡單編譯版本吧
 */
var _marked = /*#__PURE__*/ 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
);
}
複製程式碼

猛一看，好像編譯後的程式碼還蠻少的，但是細細一看，編譯後的程式碼肯定是不能用的呀， regeneratorRuntime 是個什麼鬼？哪裡有宣告呀？ mark 和 wrap 方法又都做了什麼？

難道就不能編譯一個完整可用的程式碼嗎？

regenerator

如果你想看到完整可用的程式碼，你可以使用 ofollow,noindex">regenerator ，這是 facebook 下的一個工具，用於編譯 ES6 的 generator 函式。

我們先安裝一下 regenerator：

npm install -g regenerator
複製程式碼

然後新建一個 generator.js 檔案，裡面的程式碼就是文章最一開始的程式碼，我們執行命令：

regenerator --include-runtime generator.js > generator-es5.js
複製程式碼

我們就可以在 generator-es5.js 檔案看到編譯後的完整可用的程式碼。

而這一編譯就編譯了 700 多行…… 編譯後的程式碼可以檢視 generator-es5.js

總之編譯後的程式碼還蠻複雜，我們可以從中抽離出大致的邏輯，至少讓簡單編譯的那段程式碼能夠跑起來。

mark 函式

簡單編譯後的程式碼第一段是這樣的：

var _marked = /*#__PURE__*/ regeneratorRuntime.mark(helloWorldGenerator);
複製程式碼

我們檢視完整編譯版本中 mark 函式的原始碼：

runtime.mark = function(genFun) {
genFun.__proto__ = GeneratorFunctionPrototype;
genFun.prototype = Object.create(Gp);
return genFun;
};
複製程式碼

這其中又涉及了 GeneratorFunctionPrototype 和 Gp 變數，我們也檢視下對應的程式碼：

function Generator() {}
function GeneratorFunction() {}
function GeneratorFunctionPrototype() {}

...

var Gp = GeneratorFunctionPrototype.prototype =
Generator.prototype = Object.create(IteratorPrototype);

GeneratorFunction.prototype = Gp.constructor = GeneratorFunctionPrototype;

GeneratorFunctionPrototype.constructor = GeneratorFunction;

GeneratorFunctionPrototype[toStringTagSymbol] =
GeneratorFunction.displayName = "GeneratorFunction";
複製程式碼

這段程式碼構建了一堆看起來很複雜的關係鏈，其實這是參照著ES6 規範構建的關係鏈:

圖中 +@@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());
複製程式碼

ES6 系列

ES6 系列目錄地址： github.com/mqyqingfeng…

ES6 系列預計寫二十篇左右，旨在加深 ES6 部分知識點的理解，重點講解塊級作用域、標籤模板、箭頭函式、Symbol、Set、Map 以及 Promise 的模擬實現、模組載入方案、非同步處理等內容。

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。