Generator 詳解（使用場景，babel 轉譯，協程，異步，上層應用，async/await）

• 博客 github 地址： https://github.com/HCThink/h-blog/blob/master/js/syncAndAsync/generator/readme.md
• github 首頁(star+watch，一手動態直達)： https://github.com/HCThink/h-blog
• 掘金 link , 掘金 專欄
• segmentfault 主頁

原創禁止私自轉載

---

Generator

能夠爲所欲爲的交出和恢復函數的執行權，yield交出執行權，next()恢復執行權

Generator 函數是一個狀態機，封裝了多個內部狀態，執行一個Generator函數會返回一個迭代器對象，能夠依次遍歷 Generator 函數內部的每個狀態

調用一個生成器函數並不會立刻執行它裏面的語句，而是返回一個這個 generator 的 迭代器 （iterator ）對象。當這個迭代器的 next() 方法被首次（後續）調用時，其內的語句會執行到第一個（後續）出現yield的位置爲止，yield 後緊跟迭代器要返回的值。

或者若是用的是 yield*（多了個星號），則表示將執行權移交給另外一個生成器函數（當前生成器暫停執行）。

next()方法返回一個對象，這個對象包含兩個屬性：value 和 done，value 屬性表示本次 yield 表達式的返回值，done 屬性爲布爾類型，表示生成器後續是否還有 yield 語句，即生成器函數是否已經執行完畢並返回。

典型場景

• co
• async/await

依賴 async 的上層庫和應用不勝枚舉，好比 koa

koa 等依賴其上層語法糖封裝： koa

基本使用

code

function* 這種聲明方式(function關鍵字後跟一個星號）會定義一個生成器函數 (generator function)，它返回一個 Generator 對象。

更多 demo 參考： 迭代器 , 常見數列生成器

// 斐波那契豎列生成器
function* fib() {
    let [x, y]: [number, number] = [0, 1];
    while (true) {
      [x, y] = [y, x + y];
      yield x;
    }
}

const generator: Generator = fib();

// 階乘
function* factorial() {
    let x: number = 1;
    let fac: number = 1;
    while (true) {
        yield fac;
        fac = fac * ++x;
    }
}

Generator 對象

調用一個生成器函數並不會立刻執行它裏面的語句，而是返回這個生成器的 迭代器 （實現 iterator ）的對象 Generator, 因此它符合可迭代協議和迭代器協議。如上述代碼中 const generator: Generator = fib(); 接受 fib() 的類型即： Generator

Generator 對象

• Generator.prototype.next()

返回一個由 yield表達式生成的值。

• Generator.prototype.return()

返回給定的值並結束生成器。

• Generator.prototype.throw()

向生成器拋出一個錯誤。

yield 優先級

操做符優先級彙總

yield 僅僅比 展開運算符: ..., 逗號： , 的優先級高，因此注意區分 yield fn() + 10 中 fn() + 10 纔是 yield 表達式。

generator 中斷 的入參和返回

generator 入參返回

注意，不是要說整個 generator 的出入參，而是 yield 和 next，這個問題，其實困擾我蠻久的，緣由是 generator 和傳統 js 的函數調用區別很大， 若是你很熟悉普通函數調用的出入參,在這裏每每轉不過彎。

• 返回: next() 返回類 { done: boolean, value: any } 對象， 其中 value 則是 yield 表達式的值。

實際上返回會好理解一些，當咱們執行 generator 函數以後得到一個 Generator 對象當咱們第一次調用 GeneratorObj.next() 時，函數纔會開始執行，直到第一個 yield 表達式執行完成， 並將 yield 表達式結果提供給 next 進行返回。【注意 yield 表達式此時開始執行】，而後進入中斷。

function pi(n: number): number {
    return Math.PI * n;
}

function* fn(n: number) {
    // 第一個 next 調用後 yield 表達式【pi(n) + 10， 注意優先級】執行並將結果： 13.1415... 進行包裝
    // { value： 13.14..., done: false }
    let g1 = yield pi(n) + 10;
    // 同理這裏就是： { value: 3.141592653589793, done: false }
    g1 = (yield pi(n)) + 10;

    // return 等價一最後一個 yield。
    return 100;
}

const fnGenx: Generator = fn(1);
Log(fnGenx.next());         // { value: 13.141592653589793, done: false }
Log(fnGenx.next());         // { value: 3.141592653589793, done: false }
Log(fnGenx.next());         // { value: 100, done: true }

當在生成器函數中顯式 return 時，會致使生成器當即變爲完成狀態，即調用 next() 方法返回的對象的 done 爲 true。若是 return 後面跟了一個值，那麼這個值會做爲當前調用 next() 方法返回的 value 值。

調用 next 時會當即得到 yield 表達式的執行結果。也就是說 yield 不能單獨處理異步，由於 yield 其實不在乎其後的表達式全部代碼執行結束的時間點。所以也沒法肯定下次 next 的調用時間點。

• 入參: next 方法也能夠經過接受一個參數用以向生成器傳值。請注意，首次調用 next 方法時參數會被丟棄。next 入參規則以下：

調用 next()方法時，若是傳入了參數，那麼這個參數會做爲上一條執行的 yield 語句的返回值

實際上每每會誤認爲 let g1 = （yield x10(n)） + 10; 中 yield 表達式的值就會直接賦值給 g1 其實並非這樣的，yield 表達式的值是 next 的返回值，當下次 next（100） 傳入的值會替代上一個 yield 表達式的值。也就等價於 g1 = （100） + 10

function x10(n: number): number {
    return 10 * n;
}

function* fn(n: number) {
    // yield x10(n) + 10 結果爲：30， 下次 next 時傳入的值作了 +10， 則 g1 值爲： 40
    let g1 = yield x10(n) + 10;
    Log(g1);            // 40
    // 同理： (yield x10(g1)) 結果爲： 40 * 10 = 400， 下次 next 時傳入的值： 400 + 10 = 410
    // 代入中斷的點： g1 = 410（yield x10(g1)） + 10 =  420
    g1 = (yield x10(g1)) + 10;
    Log(g1);            // 420
}

// 第一個參數由生成器提供
const fnGenx: Generator = fn(2);
let genObj = fnGenx.next(100);    // 第一次入參會被丟棄， 由於他沒有上一個 yield

while (!genObj.done) {
    Log("outer: ", genObj.value);
    genObj = fnGenx.next(genObj.value + 10);
}

// outer:  30
// 40
// outer:  400
// 420

一個官方 demo

/** gen函數運行解析：
 * i=0 時傳入參數(0)，並將參數0賦給上一句yield的返回賦值，因爲沒有上一句yield語句，這步被忽略
 * 執行var val =100，而後執行yield val，此時g.next(i)返回{ value: 100, done: false }
 * 而後console.log(i,g.next(i).value)，打印出0 100
 *
 * i=1 時傳入參數(1)，並將參數1賦給上一句yield的返回賦值,即(val = 1)
 * 而後執行console.log(val)，打印出1。
 * 接着進入第二次while循環，調用yield val，此時g.next(i)返回{ value: 1, done: false }
 * 而後console.log(i,g.next(i).value)，打印出1 1
 *
 * i=2 ....(省略)
 */
function* gen() {
   var val =100;
   while(true) {
      val = yield val;
      console.log(val);
   }
}

var g = gen();
for(let i =0;i<5;i++){
   console.log(i,g.next(i).value);
}

// 返回：
//  0 100
//  1
//  1 1
//  2
//  2 2
//  3
//  3 3
//  4
//  4 4

yield*

若是 yield* Generator， 能夠等價認爲將 這個 Generator 的全部 yield 插入到 當前位置

function* anotherGenerator(i) {
    yield i + 1;
    yield i + 2;
    yield i + 3;
}

function* generator(i){
    yield i;
    yield* anotherGenerator(i);// 移交執行權
    yield i + 10;
}

// 等價於
function* generator(i){
    yield i;
    //   yield* anotherGenerator(i);// 移交執行權
    yield i + 1;
    yield i + 2;
    yield i + 3;
    yield i + 10;
}

注意點

1. next 的參數會做爲上一條執行的 yield 語句的返回值: let first = yield 1; 中 first 不是直接賦值爲 yield 表達式的值， 而是 下次 next 傳入的值。
2. 生成器函數不能當作構造器使用。

function* f() {}
var obj = new f; // throws "TypeError: f is not a constructor"

1. yield 表達式是當即執行的，而且返回表達式值， 若是 yield 表達式是異步的，你須要在恰當的時機觸發 next 才能達到 async 的執行順序。在『重要問題 generator & 異步』中有詳細講解
2. generator 和異步機制不一樣，只是配合 generator + 執行器能夠 '同步化' 處理異步, Generator 函數是ES6提供的一種異步編程解決方案
3. 「中斷」是 Generator 的重要特徵 ———— Generator 能讓一段程序執行到指定的位置先中斷，啓動。

babel 轉譯

參考： demo

function *gen(p) {
  console.log(p)
  const de1 = yield fn(p);
  console.log(de1)
  const de2 = yield fn(de1);
  console.log(de2)
}

function fn(p) {
    return Math.random() * p;
}

經過 babel 編譯爲

"use strict";
var _marked = /*#__PURE__*/regeneratorRuntime.mark(gen);
function gen(p) {
  var de1, de2;
  return regeneratorRuntime.wrap(function gen$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          console.log(p);
          _context.next = 3;
          return fn(p);
        case 3:
          de1 = _context.sent;
          console.log(de1);
          _context.next = 7;
          return fn(de1);
        case 7:
          de2 = _context.sent;
          console.log(de2);
        case 9:
        case "end":
          return _context.stop();
      }
    }
  }, _marked, this);
}

function fn(p) {
  return Math.random() * p;
}

能夠看到 babel 使用了一個諸如的對象： regeneratorRuntime 在不支持的環境 polyfill，這個對象解析出如今 babel 的 babel-plugin-transform-runtime 插件中.

• 插件目錄
• source

const moduleName = injectCoreJS2
    ? "@babel/runtime-corejs2"
    : "@babel/runtime";
let modulePath = moduleName;

if (node.name === "regeneratorRuntime" && useRuntimeRegenerator) {
    path.replaceWith(
    this.addDefaultImport(
        `${modulePath}/regenerator`,
        "regeneratorRuntime",
    ),
    );
    return;
}

繼續跟進到 babel-runtime-corejs2/regenerator/index.js, babel-runtime/regenerator/index.js 文件中, 兩個文件均只有一行代碼： module.exports = require("regenerator-runtime"); 都使用了 fackbook 的 regenerator

• regenerator
• regenerator 源碼分析參考

支撐思想： 協程

協程，又稱微線程，纖程. 是一種非搶佔式資源調度單元, 是一個無優先級的輕量級的用戶態線程

前期知識準備

現代操做系統是分時操做系統，資源分配的基本單位是進程，CPU調度的基本單位是線程。

簡單來講，進程(Process), 線程(Thread)的調度是由操做系統負責，線程的睡眠、等待、喚醒的時機是由操做系統控制，開發者沒法精確的控制它們。使用協程，開發者能夠自行控制程序切換的時機，能夠在一個函數執行到一半的時候中斷執行，讓出CPU，在須要的時候再回到中斷點繼續執行。

• 上下文: 指的是程序在執行中的一個狀態。一般咱們會用調用棧來表示這個狀態——棧記載了每一個調用層級執行到哪裏，還有執行時的環境狀況等全部有關的信息。
• 調度: 指的是決定哪一個上下文能夠得到接下去的CPU時間的方法。
• 進程: 是一種古老而典型的上下文系統，每一個進程有獨立的地址空間，資源句柄，他們互相之間不發生干擾。
• 線程: 是一種輕量進程，實際上在linux內核中，二者幾乎沒有差異，除了線程並不產生新的地址空間和資源描述符表，而是複用父進程的。 可是不管如何，線程的調度和進程同樣，必須陷入內核態。

協程

傳統的編程語言，早有多任務的解決方案，其中有一種叫作"協程"（coroutine），意思是多個線程互相協做，完成異步任務， 這和普通的搶佔式線程有所不一樣。

JS 中 generator 就相似一個語言層面實現的非搶佔式的輕量級"線程"。 線程包含於進程，而協程包含於線程

• 因此協程具備極高的執行效率。由於子程序切換不是線程切換，而是由程序自身控制，所以，沒有線程切換的開銷，和多線程比，線程數量越多，協程的性能優點就越明顯。
• 不須要多線程的鎖機制
• 線程由系統控制切換，協程是由用戶控制切換。

從更高的層面來說，協程和多線程是兩種解決「多任務」編程的技術。多線程使得 '同一時刻貌似' 有多個線程在併發執行，不過須要在多個線程間協調資源，由於多個線程的執行進度是「不可控」的。而協程則避免了多線程的問題，同一時刻實質上只有一個「線程」在執行，因此不會存在資源「搶佔」的問題。

不過在 JS 領域，貌似不存在技術選擇的困難，由於 JS 目前仍是「單線程」的，因此引入協程也是很天然的選擇吧。

協程 & 函數棧

大多語言都是層級調用，好比A調用B，B在執行過程當中又調用了C，C執行完畢返回，B執行完畢返回，最後是A執行完畢。因此子程序調用是經過棧實現的，一個線程就是執行一個子程序。子程序調用老是一個入口，一次返回，調用順序是明確的。

而協程的調用和子程序不一樣。協程看上去也是子程序，但執行過程當中，在子程序內部可中斷，而後轉而執行別的子程序，在適當的時候再返回來接着執行。

協程的中斷: 其實是掛起的概念

協程發起異步操做意味着該協程將會被掛起，爲了保證喚醒時能正常運行，須要正確保存並恢復其運行時的上下文。記錄步驟爲：

• 保存當前協程的上下文（運行棧，返回地址，寄存器狀態）
• 設置將要喚醒的協程的入口指令地址到IP寄存器
• 恢復將要喚醒的協程的上下文

能夠參考 libco 騰訊開源的一個C++協程庫，做爲微信後臺的基礎庫，經受住了實際的檢驗: libco

JS 協程： generator

js 的生成器也是一種特殊的協程，它擁有 yield 原語，可是卻不能指定讓步的協程，只能讓步給生成器的調用者或恢復者。因爲不能多個協程跳來跳去，生成器相對主執行線程來講只是一個可暫停的玩具，它甚至都不須要另開新的執行棧，只須要在讓步的時候保存一下上下文就好。所以咱們認爲生成器與主控制流的關係是不對等的，也稱之爲非對稱協程（semi-coroutine）。

所以通常的協程實現都會提供兩個重要的操做 Yield 和 Resume（next）。

Generator 實現協程的問題

• 在協程執行中不能有阻塞操做，不然整個線程被阻塞(協程是語言級別的，線程，進程屬於操做系統級別)
• 須要特別關注全局變量、對象引用的使用
• yield 僅能存在於 生成器內部[對比 node-fibers]

真.協程

所謂的真協程是相對 generator 而言的， node-fibers 庫提供了對應的實現，咱們用一個例子部分代碼說明兩者區別

import Fiber from 'fibers'
function fibersCo () {    /* 基於 fibers 的執行器 ..... */    }
fibersCo(() => {
    let foo1 = a => {
        console.log('read from file1');
        let ret = Fiber.yield(a);
        return ret;
    };
    let foo2 = b => {
        console.log('read from file2');
        let ret = Fiber.yield(b);
        return ret;
    };
    let getSum = () => {
        let f1 = foo1(readFile('/etc/fstab'));
        let f2 = foo2(readFile('/etc/shells'));
        return f1.toString().length + f2.toString().length;
    };

    let sum = getSum();
});

經過這個代碼能夠發現，在第一次中斷被恢復的時候，恢復的是一系列的執行棧！從棧頂到棧底依次爲：foo1 => getSum => fibersCo 裏的匿名函數；而使用生成器，咱們就沒法寫出這樣的程序，由於 yield 原語只能在生產器內部使用, SO

不管何時被恢復，都是簡單的恢復在生成器內部，因此說生成器的中斷是不開調用棧滴。

重要問題

generator & 異步

1. generator 處理異步

generator 機制和異步有所不一樣， Generator 和普通函數本質區別在於 Generator 能讓一段程序執行到指定的位置,而後交出執行棧，調用下次 next 的時候又會從以前中斷的位置繼續開始執行，配合這種機制處理異步，則會產生同步化異步處理的效果。

1. generator 的問題

但其實很快發現 generator 不能單獨處理異步問題，緣由在於

• generator 沒法獲取下次 next 的時機。
• generator 沒法自執行

1. generator 處理異步的思路 + 實踐

使用 Generator 函數來處理異步操做的基本思想就是在執行異步操做時暫停生成器函數的執行，而後在階段性異步操做完成的狀態中經過生成器對象的next方法讓Generator函數從暫停的位置恢復執行，如此往復直到生成器函數執行結束。簡單來說其實就是將異步串行化了。

也正是基於這種思想，Generator函數內部才得以將一系列異步操做寫成相似同步操做的形式，形式上更加簡潔明瞭。

而要讓Generator函數按順序自動完成內部定義好的一系列異步操做，還須要配套的執行器。與之配套的有兩種思路

• thunk
• promise

其實在 async/await 以前就已經有了 co 庫使用此兩種方案實現相似 async 的機制。參考 co 源碼分析

• co 源碼分析

1. 優點： 異常捕獲。 generator 的異常捕獲模型，優於 promise。

function* gen(x){
  try {
    var y = yield x + 2;
  } catch (e){
    console.log(e);
  }
  return y;
}

generator 的 yield 會產生調用函數棧麼？

由於 yield 原語只能在生產器內部使用, 因此不管何時被恢復，都是簡單的恢復在生成器內部。因此說生成器的中斷是不開調用棧滴。

參考上述章節

• 真.協程
• 中斷/函數棧

上層應用

async / await

• async / await， co

併發通訊: 多個generator函數結合在一塊兒，讓他們獨立平行的運行，而且在它們執行的過程當中來來回回得傳遞信息

• csp : 並行（多個 generator 微線程通信）

參考

• function* api
• Generator api
• https://cnodejs.org/topic/58d...
• https://www.cnblogs.com/wangf...
• https://github.com/Jocs/jocs....
• https://cnodejs.org/topic/58d...
• https://brooch.me/2016/12/30/...
• https://blog.csdn.net/shenlei...