聊聊ES6中的generator

generator
generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但函数执行中间可以停止。

ES6定义generator标准的哥们借鉴了Python的generator的概念和语法。
话说回来，generator有什么用呢，让我们通过几个函数来看一看它的作用：

//普通函数——一路到底
function show() {
     alert('a');
     alert('b');
}
show();

这个函数执行后会弹出a 和弹出b，那么，我们能不能让他在弹出a之后停下呢，下面就需要借助我们的generator函数了。

    //generatro函数——中间能停
    function *show() {
      alert('a');
      
      alert('b');
    }
    show();

我们发现，这个函数名字前面有个 * ，这就是generator函数的特点，当然了，*可以和函数名贴在一起，可以和function贴在一起，也可以谁都不贴，直接放中间，就是不能连起来写，像这种

    function*show() {
      alert('a');

      alert('b');
    }
    show();

现在generator函数有了，你得告诉它在哪停呀，有个东西叫 yield，又到了ask开心学英语时间，yield翻译过来有屈服、投降、生产等意思，在咱们函数里，取“放弃”的意思，简单理解为暂时放弃控制权，等过一会再把控制权还给我。

    //generatro函数——中间能停
    function*show() {
      alert('a');

      yield;
      
      alert('b');
    }
    show();

我们运行上面函数的时候发现，哎，函数没有执行，也没有报错，这是咋回事呢？

这也是generator和普通函数的区别，当函数执行的时候，并不会执行函数里面的内容，而是创建了一个generator对象。

    //generatro函数——中间能停
    function *show() {
      alert('a');

      yield;  //放弃、暂停

      alert('b');
    }

    let genObj = show();
    console.log(genObj); //这里面有个特别重要的方法
    genObj.next();      //对，就是这里写到的next()方法

这里代码执行的时候，会弹出a，我们在后面再写一个 next ，这样执行的时候，会弹出a和b，说白了就是踹一脚走一步。

在这里大家可能会奇怪了，我现在知道了generator配合yield可以让函数走走停停，但我为什么要让它停呢，其实很简答，就像我们平时坐出租车会让师傅停下来等我们忙活其他的事，事情忙完之后再让师傅继续开一样。generator和yield特别适用于请求数据的场景，下面看代码：

    function 函数(){
      //代码
      ajax(xxx,function(){
        ///代码...
      })
    }

正常来讲，我们想用到请求来的一些数据，那么就需要我们将用数据的代码放在ajax请求成功之后，然后就导致了我们所谓的回调函数，回调里面还有回调，最后产生了一大堆代码。

    function *函数(){
      //代码
      yield  ajax(xxx)
      
      ///代码...
    }

而如果是generator函数，我们可以在请求数据的时候，可以让函数暂停，等请求结束之后，函数再接着去执行，这样就不用写成回调的那种方式。

上面两段代码，我们可以看出来，普通函数涉及到异步操作的时候，我们只能通过回调来写，但在generator函数里，我们可以等待数据请求结束，然后再去执行下面的函数。

那么generator是如何做到让函数走走停停的呢？这其实就是generator名字的由来，生成

    function *show() {
      alert('a');

      yield;  //放弃、暂停

      alert('b');
    }

    function show_1() {
      alert('a');
    }
    function show_2() {
      alert('b');
    }

    let genObj = show();
    console.log(genObj);
    genObj.next();  //show_1()
    genObj.next();  //show_2()

拿我们第一次写的函数来看吧，它将我们写的一个函数show，拆分成了两个小函数，show_1，show_2，这样就能实现我们看到的走走停停效果。

到这里，generator函数的简单运用，相信大家已经学会了，但是大家可能对文章中提到的yield不是特别了解，而yield也是generator中最不好理解的一个东西，能不能把它掌握，很大程度上决定了我们学习generator的好坏，也是因为yield比较重要，打算放在下面一篇文章中，大家感兴趣的话，可以继续关注我哦