详解生成器和迭代器的执行顺序

在倒腾生成器和迭代器的时候说实话被绕的晕乎乎的，现在总算是弄明白了一点，在这简单记录下，防止忘记

简单代码如下：（代码很简单，定义一个普通函数fn，一个生成器Ifn）

    let fn = () => {
        console.log('fn执行了');
        return 'fn return出来的'
    }
    function* Ifn(w) {
        console.log('Ifn里面的w:', w)
        let c = yield fn();
        console.log('c的值为：', c);
        yield ('a' + c);
    };
    let d = Ifn('传入的w');
    console.log(d.next());
    console.log(d.next('next传入的值'));
    console.log(d.next());

  let d = Ifn('传入的w')

定义一个迭代器d，并传入‘值传入的w‘；在这里生成器内部什么也不会干，只是把w的值赋值了一下

console.log(d.next())

执行一个迭代器，并打印返回的值。此时可以理解问函数开始执行，但由于是生成器，因此遇上yield关键字程序会被挂起。也就是把yield关键字后面的语句执行完成后程序进入等待状态（等待下一个next），在这里停留在了语句let c = yield fn();这里。此时fn被执行，程序被挂起，c等待赋值状态。

yield fn()返回给next的值入下：

{value:'fn return出来的',done:false}

其中value的值取决于fn()，若该函数没有返回值则返回undefined，又返回则取改返回值，done可以简单理解为是否为最后一个yield 关键字（迭代是否结束），若yield 后面直接跟一个变量，那么直接取该变量作为value值。 

console.log(d.next('next传入的值'));

执行一个迭代器，并打印返回的值，迭代器被挂起部分再一次收到next，程序接着往下执行，c被赋值，在这里要注意，yield的返回值和yield函数的返回值无关联，也就是说fn返回的值并不会被yield当作返回值返回给c，真的的返回给c的是我们next里面传入的值，fn的返回值被yield返回给next了，因此这里c的值为'next传入的值'，返回给 next的值为：

{value: "anext传入的值", done: false}

 

console.log(d.next()); 

同样的原理接着往下走，程序没有yield关键字了，因此对next返回

{value:undefined,done:true}

 

 控制台打印入下：

1、Ifn里面的w: 传入的w
2、fn执行了
3、{value: "fn return出来的", done: false}
4、c的值为： next传入的值
5、{value: "anext传入的值", done: false}
6、{value: undefined, done: true}