生成器 —— 打破完整运行

普通 javascript 函数：一旦开始执行，就会运行到结束，期间不会有其他代码能打断并插入其间

生成器：使用 yield 语法，可以一次或多次启动和停止，并不一定非要完成的函数

demo：

生成器定义

    function *foo(x,y){
        console.log( x, y );
        return x * y;
    }

    var it = foo( 6, 7);  // 注意此时并没有执行 *foo

    var res = it.next(); // 6,7

    res.value;  // 42

双向消息传递

function *foo(x) {
        var y = x*(yield 'Hello');
        return y;
    }

    var it = foo( 6 );

    var res = it.next();  //  第一个next(), res接收第一个yield表达式发出的消息
    res.value;  // "Hello"

    res = it.next( 7 );  //  向暂停的yield传入7
    console.log(res.value);  //  42

注意：

• 第一次调用迭代器 next()时一般不会传入参数发送，因为只有暂停的 yield 才能接收这样的传递值，规范和所有兼容浏览器会默默丢弃第一个 next()传递的任何东西
• 生成器函数和普通函数一样，使用 return 标记迭代结束，如果没有 return——总有一个假定的/隐式的 return(return undefined;)

多个迭代器

每次构建一个迭代器，实际上就隐式构建了生成器的一个实例，通过这个迭代器来控制的是这个生成器实例，并不是控制声明生成器的函数本身

function *foo(){
    var x = yield 2;
    z ++ ;
    var y = yield (x * z);
    console.log( x, y, z);
}

z = 1;

var it1 = foo();  // 迭代器实例1
var it2 = foo();  // 迭代器实例2

var val1 = it1.next().value;  // 2 <-- yield 2
var val2 = it2.next().value;  // 2 <-- yield 2

val1 = it1.next(val2 * 10).value;  // 40  x:20  z:2
val2 = it2.next(val1 * 5).value;  // 600 x:200 z:3

it1.next( val2 / 2 );  //  y: 300  20 300 3
it2.next( val1 / 4 );  //  y: 10  200 10 3

生成器产生值（介绍迭代器基础）

生产者与迭代器——一种通用的设计模式

迭代器——一个定义良好的接口，用于从一个生产者一步步得到一系列值

迭代器的 next() : 调用返回一个对象，这个对象有两个属性，done 是个 boolean 值，标识迭代器的完成状态，value 中放置本次调用 next()获取到的迭代器的值

ES6 新增了一个 for...of 循环——原生循环语法自动迭代标准迭代器

for...of 循环每次迭代中自动调用 next()，不会像 next()传入任何值，并会在接收到 done: true 之后自动停止

也可以手工在迭代器上循环，调用 next()并检查返回 done:true 条件来确定何时停止循环

ES6 之后，array 有自己默认的迭代器，即 array 是可迭代的

一个数字序列生产者实现标准的迭代器接口栗子（使用闭包）：

var something = (function() {
    var nextVal;

    return {
        // for...of循环需要
        [Symbol.iterator]: function() {
            return this;
        },
        // 标准迭代器接口方法
        next: function() {
            if (nextVal === undefined) {
                nextVal = 1;
            } else {
                nextVal = nextVal * 3 + 1;
            }
            return {
                done: false,
                value: nextVal
            };
        }
    };
})();

使用 for...of 在 something 上循环，注意是直接获取到 value

for (var v of something) {
    console.log(v);
    // 避免死循环
    if (v > 500) {
        break;
    }
}

手工在 something 上循环

for (var ret; (ret = something.next()) && !ret.done; ) {
    console.log(ret.value);

    // 避免死循环
    if (ret.value > 500) {
        break;
    }
}

iterable

iterable 指一个包含可以在其值上迭代的迭代器的对象

ES6 从一个 iterable 中抽取迭代器的方法：包含一个名称是专门的 ES6 符号值 Symbol.iterator 的函数，调用这个函数会返回一个迭代器，通常每次调用会返回一个全新的迭代器，这一点不是必须的。

注意：类似上一节定义的数字序列生成器 something 如果没有定义[Symbol.iterator]则不能算是 iterable，尽管可以通过 next()调用在其值上循环

上一节定义的 something 既是一个迭代器也是一个 iterable，可以使用通用的 iterable 上手工迭代方式：

var it = something[Symbol.iterator]();
for (var ret1; (ret1 = it.next()) && !ret1.done; ) {
    console.log(ret1.value);

    // 避免死循环
    if (ret1.value > 500) {
        break;
    }
}

生成器迭代器

生成器可以视为一个值的生产者，通过迭代器接口的 next()调用一次提取一个值

但注意严格来说生成器本身并不是 iterable，注意对比区别

• 生成器函数执行时（调用时），得到一个迭代器
• iterable 获取迭代器方式，调用iterable[Symbol.iterator]()

使用生成器实现上文的数字序列生产者 something(区别于闭包)

function* something() {
    var nextVal;

    while (true) {
        if (nextVal === undefined) {
            nextVal = 1;
        } else {
            nextVal = nextVal * 3 + 1;
        }
        yield nextVal;
    }
}

生成器会在每次 while 迭代中暂停，通过 yield 关键字返回主程序或事件循环队列中，此时函数*something()的状态（作用域）将会被保持

同样可以在生成器调用返回的迭代器上使用 for...of 循环

var it = something();
for (var v of it) {
    console.log(v);

    if (v > 500) {
        break;
    }
}

console.log(it.next()); // 打印出{value:undefined, done:true}，代表生成器在for...of循环退出后已经被终止

注意：实际上生成器 something()调用时返回的迭代器是一个 iterable,类似上一节 something, 这个迭代器的 Symbol.iterator 函数做的基本就是 return this

使用 for...of 循环的提前结束（break、return 或未捕获的异常）会向生成器的迭代器发送一个信号使其终止，对比上一节使用闭包实现的 something，在 for...of 循环 break 结束后，其迭代器并没有终止（实际上我们也并没有提供终止的方法），再次调用 next()还会获取到下一个值

另外如果希望手工循环生成器迭代器时也能发送结束信号，可以通过调用 return(...)实现

var it1 = something();
for (var v of it1) {
    console.log(v);

    if (v > 500) {
        // 完成生成器的迭代器
        console.log(it1.return('Hello World')); // {value: 'Hello World', done: true}
        // 不需要break
    }
}

如果在生成器中有 try...finally 语句，finally 语句将总会运行，即使生成器已经外部结束，可以在这里清理资源

改造一下 something

function* something() {
    var nextVal;

    try {
        while (true) {
            if (nextVal === undefined) {
                nextVal = 1;
            } else {
                nextVal = nextVal * 3 + 1;
            }
            yield nextVal;
        }
    } finally {
        console.log('cleaning up!');
    }
}
// 手工调用return发送结束信号
var it1 = something();
for (var v of it1) {
    console.log(v);

    if (v > 500) {
        // 完成生成器的迭代器
        console.log(it1.return('Hello World')); // {value: 'Hello World', done: true}
        // 不需要break
    }
}

观察打印结果顺序：终止生成器=》运行 finally 语句=》return 传入的 value 设置为返回值
todo 这里放张图

异步迭代生成器

上一节展示的是生成器作为生产者在消费生产值（consuming produced values）场景中的使用，关注的是 yield 出来的生产值(var a = it.next()时，a 的值；注意区分在生成器中 var a = yield 2，实际 a 要获取的值是外部调用 next 时传入的参数)，而 it.next()通常不需要传入任何值或是不关注传入的值

而在异步并发下使用生成器就是另一种使用方式了，对书上的例子做一个简化：

// 接收一个flag
// 简单的使用true/false区分正常或错误返回
function aFunc(flag, cb) {
    setTimeout(() => {
        if (flag) {
            cb(false, 'normal');
        } else {
            cb(true, 'an error');
        }
    }, 1000);
}

// 一个异步函数
function foo(flag) {
    aFunc(flag, (err, data) => {
        if (err) {
            // 向*main抛出一个错误
            it.throw(data);
        } else {
            // 收到的data恢复*main()
            // 并传递数据data
            it.next(data);
        }
    });
}

function* main(flag) {
    try {
        // foo()是一个异步函数
        // 相当于yield undefined
        // 并不用于传递消息
        // 用于流程控制实现暂停/阻塞
        var text = yield foo(flag);
        console.log(text);
    } catch (error) {
        // 捕获错误
        console.error(error);
    }
}

// 一个正常结束的生成器实例
var it = main(true);
// 启动迭代器
// 并不关心yield出来的值
it.next();

// 一个异常结束被catch的生成器实例
var it1 = main(false);
// 启动迭代器
it1.next();

借助 yield 的暂停功能，在生成器内部有了看似同步的代码，而实际上 foo()内部是异步运行的；另外，即使使用 yield 暂停了生成器，错误仍能被捕获

同步错误处理

上一个例子中，通过对生成器传入错误it.throw(data)，在生成器内部可以用 try...catch 捕获异步错误并处理（如果是普通函数，try...catch 中是无法处理异步错误的）；同样，生成器也可以向外抛出错误，甚至抛出同一个被传入的错误，这个时候就需要外部迭代器处理这个错误

    // 一个不处理错误的生成器
    function* main() {

        var x = yield 'Hello';
        // 启动后直接被抛入了一个错误
        // 这句不会到达
        console.log(x);
    }

    var it = main();
    it.next();

    try {
        // 向生成器抛入一个错误
        it.throw('Opps');

    } catch (error) {
        // 生成器中未处理这个错误
        console.error(`*main中没有处理：${error}`);
    }

生成器+Promise

在 ES6 中使用生成器（看似同步的异步代码）+Promise（可信任和可组合）是最完美的异步解决方式

将上一节的例子改造成使用 Promise

// 改造为返回Promise
function aFunc(flag) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (flag) {
                resolve('done');
            } else {
                reject('error');
            }
        }, 1000);
    });
}

function foo(flag) {
    return aFunc(flag);
}

// 生成器main并不需要修改
function* main() {
    try {
        // 此时yield出一个Promise
        var text = yield foo(true);
        console.log(text);
    } catch (error) {
        console.error(error);
    }
}

var it = main();

// 启动生成器，接收到yield抛出的Promise对象
var p = it.next().value;

// 使用这个Promise的决议结果驱动生成器
p.then(data => {
    it.next(data);
}).catch(error => {
    it.throw(error);
});

对比上一节相似例子的代码，对生成器第一个 yield 的启动控制由异步函数 foo 内转到了外部，即利用 Promise 的反转控制反转的特性。

由此可以得知生成器+Promise 模式：生成器内部 yield 出一个 Promise，然后通过这个 Promise 的决议控制生成器的迭代器

如果生成器中有多个 yield 暂停步骤呢？那我们就需要一种方式实现重复（即循环）的迭代控制

书上提供了一个辅助方法，配合上一节的例子可以进一步了解这种协同运作模式

function run(gen) {
    var args = [].slice.call(arguments, 1),
        it;
    // 在当前上下文中初始化生成器
    // 可以看出来启动时确认了生成器上下文环境，之后每次yield暂停时，该上下文环境会被保存下来
    it = gen.apply(this, args);

    // 最终返回一个Promise用于生成器完成
    // 保证一定会返回Promise，即使传入的生成器中没有暂停点yield
    return Promise.resolve().then(function handleNext(value) {
        // 获取下一个yield
        var next = it.next(value);

        return (function handleResult(next) {
            // 生成器是否运行完毕
            if (next.done) {
                return next.value;
            }
            // 否则继续运行
            else {
                return Promise.resolve(next.value).then(
                    // 成功则恢复异步循环，把决议值发回生成器
                    handleNext,
                    // 如果value是被拒绝的promise
                    // 就把错误抛回给生成器处理
                    function handleErr(err) {
                        // it.throw抛出错误后，会隐式的停止生成器
                        // 故then中调用handleResult时，next.done将会是true
                        return Promise.resolve(it.throw(err)).then(
                            handleResult
                        );
                    }
                );
            }
        })(next);
    });
}

function aFunc(flag) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (flag) {
                resolve('done');
            } else {
                reject('error');
            }
        }, 1000);
    });
}

function foo(flag) {
    return aFunc(flag);
}
// 具有多个yield暂停点的生成器
function* main() {
    try {
        // 三个依赖上一个结果的异步串行流程
        // 中间流程抛出错误则会停止之后的流程
        var a = yield foo(true);
        var b = yield foo(a === 'done');
        // 切换注释，可以测试中途步骤报错的情况
        // var b = yield foo(a !== 'done');
        var c = yield foo(b === 'done');
        console.log(c);
    } catch (error) {
        console.error(error);
    }
}
// 自动运行生成器，直到结束（成功或失败）
run(main);

ES7: async 与 await
本质上, async 与 await 就是生成器+Promise 模式的语法糖，这里不展开叙述

生成器委托

从一个生成器中调用另一个生成器，如果使用上一节的辅助函数 run(gen)，在调用的生成器中会有类似这样的代码：var r = yield run(foo);，run(gen)返回的是一个 Promise，它会在传入的生成器参数结束时决议，故这样写相当于在调用 foo 的生成器代码中将暂停到 foo 结束为止

还可以使用yield 委托，其具体语法是：yield * __(注意多出来的*)。

function* foo() {
    console.log('*foo starting');
    yield 3;
    yield 4;
    console.log('*foo finished');
}

function* bar() {
    yield 1;
    yield 2;
    yield* foo(); // yield委托
    yield 5;
}

var it = bar();

it.next().value; // 1
it.next().value; // 2
it.next().value; // *foo starting foo启动
// 3 并且在第一个yield处暂停
it.next().value; // 4 在foo生成器中迭代
it.next().value; // *foo finished foo结束
// 5 回到bar中迭代，在下一个yield处暂停

yield * __的工作机制如下：

• POS A 处yield *foo()将调用 foo()获得一个迭代器，并将当前*bar生成器的迭代器实例 it 的控制权委托（转移）到了*foo的迭代器实例 （即原本调用 it.next()在*bar中迭代转移到了*foo中迭代）

• 当委托的 it 在*foo中的迭代完成后，it 会自动转回控制*bar，POS B

• 实际上 yield 可以委托到任意iterable，比如 yield *[1,2,3]会消耗数组值[1,2,3]的默认迭代器

递归委托

yield 委托可以跟踪任意多委托步骤，甚至可以使用 yield 委托实现异步的生成器递归，即 yield 委托到其自身的生成器

将书上例子做一些调整，使其可以运行，注意需要借助辅助方法run，运行这个例子，好好体会递归委托的调用过程

// 简单异步函数，1s后返回传入的val
function aFunc(val) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(val);
        }, 1000);
    });
}

// 递归委托
function* foo(val) {
    if (val > 1) {
        // 生成器递归
        let rf = yield* foo(val - 1);
        console.log(`inside foo: ${rf}`);
    }
    return yield aFunc(val);
}

function* bar(val) {
    var r = yield* foo(val);
    console.log(`inside bar: ${r}`);
    return r;
}

// 生成器+Promise模式，使用run工具运行启动
var it = run(bar, 3);
it.then(r => {
    console.log(`ouside: ${r}`);
});