ES6系列教程第三篇--Generator 详解

桃扇骨 2022-05-24 08:21 196阅读 0赞

**一、什么是Generator 函数**

先看下面的Generator函数，

function* helloGenerator() {
           console.log("this is generator");
    }

这个函数与普通的函数区别是在定义的时候有个\*,我们来执行下这个函数。

function* helloGenerator() {
           console.log("this is generator");
       }
    helloGenerator();//没有执行

我们发现，并没有像普通的函数一样，输出打印日志。我们把代码改成下面：

function* helloGenerator() {
       console.log("this is generator");
     }
    var h = helloGenerator();
    h.next();

这个时候如期的打印了日志，我们分析下，对于Generator函数，下面的语句

var h = helloGenerator();

仅仅是创建了这个函数的句柄，并没有实际执行，需要进一步调用next(),才能触发方法。

function* helloGenerator() {
           yield "hello";
           yield "generator";
           return;
       }
       var h = helloGenerator();
       console.log(h.next());//{ value: 'hello', done: false }
       console.log(h.next());//{ value: 'generator', done: false }
       console.log(h.next());//{ value: 'undefined', done: true }

这个例子中我们引入了yield这个关键字，分析下这个执行过程

(1)创建了h对象，指向helloGenerator的句柄，

(2)第一次调用nex()，执行到"yield hello"，暂缓执行,并返回了"hello"

(3)第二次调用next()，继续上一次的执行，执行到"yield generator",暂缓执行，并返回了"generator"。

(4)第三次调用next(),直接执行return，并返回done:true，表明结束。

经过上面的分析，yield实际就是暂缓执行的标示，每执行一次next()，相当于指针移动到下一个yield位置。

总结一下，Generator函数是ES6提供的一种异步编程解决方案。**通过yield标识位和next()方法调用，实现函数的分段执行**。

**二、****Generator 函数与迭代器(Iterator)**

经过上一篇我们学过[迭代器][Link 1]，大家对于迭代器接口的next方法应该不陌生，Generator函数也涉及到next()方法的调用,他们之间有什么关系呢？实现了迭代器接口的对象都可以for-of实现遍历。我们来测试下：

function* helloGenerator() {
           yield "hello";
           yield "generator";
           return;
       }
       var h = helloGenerator();
       for(var value of h){
       	  console.log(value);//"hello","generator"
       }

helloGenerarot对象是支持for-of循环的，也说明Generator函数在原型上实现了迭代器接口，上面调用的next()方法其实就是迭代器的next()方法。我们继续来看next()方法。

function* gen(x,y){
       	  let z= yield x+y;
       	  let result = yield z*x;
       	  return result
       }
       var g = gen(5,6);
       console.log(g.next());//{value: 11, done: false}
       console.log(g.next());//{value: NaN, done: false}

分析上面的代码：

1、第一执行next()，运行"yield x+y"，并返回x+y的运算结果11；

2、第二次执行next()，运行"yield z\*x",此时是z为11，x为5，运算结果为55才对，为何是NaN呢？第一次运行到yield x+y，就将结果返回，实际没有执行z的赋值；第二次运行时，执行的是let z=undefined，所以运算z\*x的结果是NaN。

那有没有办法解决这个问题，我们来改下这个例子：

function* gen(x,y){
       	  let z= yield x+y;
       	  let result = yield z*x;
       	  return result
       }
       var g = gen(5,6);
       console.log(g.next());//{value: 11, done: false}
       console.log(g.next(11));//{value: 55, done: false}

请注意，我们第二次调用的时候，next方法中传入了参数11，此时得到正确的结果。next()方法是可以带参数的，其中的参数就替换了上一次yield执行的结果。在这个例子中z复制为11，即执行了let z=11，所以运行z\*x时，返回了正确的值。

道友们可能要问，不能每次都算好上一次的运行结果，作为下一次next的入参吧，没人会在实际编码过程中这个干的，我们继续：

function* gen(x,y){
       	  let z= yield x+y;
       	  let result = yield z*x;
       	  return result
       }
       var g = gen(5,6);
       var i =g.next();//{value: 11, done: false}
       g.next(i.value);//{value: 55, done: false}

这样就解决了，next()方法执行后，会返回yield后面表达式的运算结果，将上一次的运算结果，作为下一次的入参传入，实现了"无缝对接"。

这里我们用这个例子主要解释next的入参和返回值的用法，在实际工程中，我们可以用下面这种简单的方式(特别感谢[恍惚丶旧时光][Link 2]同学的提醒)，大家可以琢磨下。

function* gen(x,y){
       let z,result;
       yield z= x+y;
       yield result = z*x;
       return result
    }
    var g = gen(5,6);
    g.next();//{value: 11, done: false}
    g.next();//{value: 55, done: false}

对于迭代器(Iterator)接口，还有一个return()方法，我们来看下:

function* gen(x,y){
       	  yield 1;
       	  yield 2;
       	  yield 3;
       }
       var g = gen();
       g.next();//{value: 1, done: false}
       g.next();//{value: 2, done: false}
       g.return();//{value: undefined, done: true}
       g.next();//{value: undefined, done: true}

执行return()方法后就返回done:true，Generator 函数遍历终止，后面的yield 3不会再执行了。与next()方法一样，return()也可以带参数。

function* gen(x,y){
       	  yield 1;
       	  yield 2;
       	  yield 3;
       }
       var g = gen();
       g.next();//{value: 1, done: false}
       g.next();//{value: 2, done: false}
       g.return(5);//{value: 5, done: true}
       g.next();//{value: undefined, done: true}

此时，value就是return传入的值，执行return后结束，调用next(),将不会执行 yield 3。

**三、yield 表达式**

上面我们说到yield是Generator函数的暂缓执行的标识，对于yield只能配合Generator函数使用，在普通的函数中使用会报错。可以执行下面的代码，看下结果

function gen(x,y){
       	  yield 1;
       	  yield 2;
       	  yield 3;
       }//报错

Generator函数中还有一种yield\*这个表达方式，看看它有什么作用。

function* foo(){
       	yield "a";
       	yield "b";
       }
       function* gen(x,y){
       	  yield 1;
       	  yield 2;
       	  yield* foo();
       	  yield 3;
       }
       var g = gen();
       console.log(g.next());//{value: 1, done: false}
       console.log(g.next());//{value: 2, done: false}
       console.log(g.next());//{value: "a", done: true}
       console.log(g.next());//{value: "b", done: true}
       console.log(g.next());//{value: "3", done: true}

我们来分析下过程，当执行yield\*时，实际是遍历后面的Generator函数，等价于下面的写法：

function* foo(){
       	yield "a";
       	yield "b";
       }
       function* gen(x,y){
       	  yield 1;
       	  yield 2;
       	  for(var value of foo()){
       	  	yield value;
       	  }
       	  yield 3;
       }

注意：yield\* 后面只能适配Generator函数。

**四、应用**

讲了这么多，那么Generator函数用在什么场景呢？要回答这个问题，首先我们总结Generator它的特点，一句话：**可以随心所欲的交出和恢复函数的执行权**，yield交出执行权，next()恢复执行权。我们举几个应用场景的实例。

1、协程

协程可以理解成多线程间的协作，比如说A，B两个线程根据实际逻辑控制共同完成某个任务，A运行一段时间后，暂缓执行，交由B运行，B运行一段时间后，再交回A运行，直到运行任务完成。对于JavaScript单线程来说，我们可以理解为函数间的协作，由多个函数间相互配合完成某个任务。

下面我们利用饭店肚包鸡的制作过程来说明，熊大去饭店吃饭，点了只肚包鸡，然后就美滋滋的玩着游戏等着吃鸡。这时后厨就开始忙活了，后厨只有一名大厨，还有若干伙计，由于大厨很忙，无法兼顾整个制作过程，需要伙计协助，于是根据肚包鸡的制作过程做了如下的分工。

肚包鸡的过程：准备工作(宰鸡，洗鸡，刀工等)->炒鸡->炖鸡->上料->上桌

大厨很忙，负责核心的工序：炒鸡，上料

伙计负责没有技术含量，只有工作量的打杂工序：准备工作，炖鸡，上桌``

//大厨的活
       function* chef(){
          console.log("fired chicken");//炒鸡
          yield "worker";//交由伙计处理
          console.log("sdd ingredients");//上料
          yield "worker";//交由伙计处理
       }
       //伙计的活
       function* worker(){
           console.log("prepare chicken");//准备工作
           yield "chef";//交由大厨处理
           console.log("stewed chicken");//炖鸡
           yield "chef";//交由大厨处理
           console.log("serve chicken");//上菜
       }
       var ch = chef();
       var wo = worker();
       //流程控制
       function run(gen){
           var v = gen.next();
           if(v.value =="chef"){
              run(ch);
           }else if(v.value =="worker"){
           	  run(wo);
           }
       }
       run(wo);//开始执行

我们来分析下代码，我们按照大厨和伙计的角色，分别创建了两个Generator函数，chef和worker。函数中列出了各自角色要干的活，当要转交给其他人任务时，利用yield，暂停执行，并将执行权交出；run方法实现流程控制，根据yield返回的值，决定移交给哪个角色函数。相互配合，直到完成整个过程，熊大终于可以吃上肚包鸡了。

我们执行看下效果，与工序保持一致。

![70][]

2、异步编程

Generator函数，官方给的定义是"Generator函数是ES6提供的一种异步编程解决方案"。我认为它解决异步编程的两大问题

*  回调地狱
 *  异步流控

回调地狱可以参见我的[第一篇Promise][Promise]，这里不做阐述。

那什么是异步的流控呢，简单说就是按顺序控制异步操作。下面我们就从工序的角度重新实现肚包鸡实例(上面的肚包鸡制作实例，是从角色的角度，这种模式其实并不是最佳的),每个工序都是可认为异步的过程，工序之间又是同步的控制(上一个工序完成后，才能继续下一个工序)，这就是异步流控。

普通方法实现肚包鸡的制作过程：

setTimeout(function(){
       console.log("prepare chicken");
       setTimeout(function(){
          console.log("fired chicken");
          setTimeout(function(){
             console.log("stewed chicken");
             ....
           },500)
       },500)
    },500);

用setTimeout方法来模拟异步过程，这种层层嵌套就是回调地狱，就是回调地狱，Promise就是解决这种回调的解决方案，有兴趣的可以作为练习，用Promise修改这个例子。

我们用Generator来实现：

//准备
       function prepare(sucess){
            setTimeout(function(){
                 console.log("prepare chicken");
                 sucess();
             },500)
       }
    
       //炒鸡
       function fired(sucess){
            setTimeout(function(){
                 console.log("fired chicken");
                 sucess();
             },500)
       }
       //炖鸡
       function stewed(sucess){
            setTimeout(function(){
                 console.log("stewed chicken");
                 sucess();
             },500)
       }
       //上料
       function sdd(sucess){
            setTimeout(function(){
                 console.log("sdd chicken");
                 sucess();
             },500)
       }
       //上菜
       function serve(sucess){
            setTimeout(function(){
                 console.log("serve chicken");
                 sucess();
             },500)
       }
    
      //流程控制
      function run(fn){
        const gen = fn();
        function next() {
            //返回工序函数的句柄给result
            const result = gen.next();
            if (result.done) return;//结束
            // result.value就是yield返回的值，是各个工序的函数
            result.value(next);//next作为入参，即本工序成功后，执行下一工序
        }
        next();
      };
      //工序
      function* task(){
         yield prepare;
         yield fired;
         yield stewed;
         yield sdd;
         yield serve;
      }
      run(task);//开始执行

我们来执行下这个过程，按照我们既定的工序顺序，每隔500ms打印如下内容。

![70 1][]

我们分析下执行过程：

1、每个工序对应一个独立的函数，在task中组合成工序列表，执行时将task作为入参传给run方法。run方法实现工序的流程控制。

2、首次执行next()方法，进行next方法体内。

const result = gen.next();gen为传入的task函数，执行yield prepare，并将prepare函数对象句柄返回给result(注意:此时并没有执行prepare函数)；

if (result.done) return;返回是否是结束状态，由于是第一步，为false跳过。

result.value(next);result.value即是prepare函数对象，next方法作为入参传入。执行result.value(next)，其实就是执行prepare(next)；prepre执行完成后，继续调用其入参的next(success())方法，即下一步工序，

3、以此类推，直到最后一步完成后，result.done为ture，结束整个工序。

从上面例子看，task方法将各类工序"扁平化",解决了层层嵌套的回调地狱；run方法，使各个工序同步执行，实现了异步流控。

**五、总结**

Generator是ES6中非常重要的一个特性，本文仅介绍了其基本的知识和用法，大家有兴趣可以进一步深入了解。

上一篇:[ES6系列教程第二篇--Iterator 详解][Link 1]                                                               下一篇：[ES6系列教程第四篇--asyn详解][ES6_--asyn]

[Link 1]: https://blog.csdn.net/tcy83/article/details/80343951
[Link 2]: https://me.csdn.net/qq_36841361
[70]: /images/20220524/b340594b5aba49a4882c8bb3664def8f.png
[Promise]: https://mp.csdn.net/postedit/80274772
[70 1]: /images/20220524/0bd57e01dbc3497894467aa7d716ea09.png
[ES6_--asyn]: https://blog.csdn.net/tcy83/article/details/80544048