【译】ES6 生成器 - 2. 深入理解 ES6 生成器

原文地址：https://davidwalsh.name/es6-generators-dive

---

如果你对于 ES6 生成器不熟悉，请先阅读并试试“1. ES6 生成器基础知识”中的代码。在你觉得基础知识已经掌握之后，我们就可以开始更深入的学习了。

异常处理

ES6 生成器设计的最强大的部分之一，是生成器内部的代码从语义上来看是同步的，尽管其外部的迭代控制是异步进行的。

一个简单亦或复杂的说法是，你可以使用非常熟悉的错误处理技术——也就是 try..catch 机制。

例如：

function *foo() {
    try {
        var x = yield 3;
        console.log( "x: " + x ); // 可能永远执行不到这里！
    }
    catch (err) {
        console.log( "Error: " + err );
    }
}

尽管函数会在表达式 yield 3 处暂停，并且会保持暂停状态任意时间，但只要有错误被传回到生成器，try..catch 仍然能够捕获！这就像是有了传统的回调函数的异步能力。:)

但是，一个错误是如何被传回到生成器的呢？

var it = foo();

var res = it.next(); // { value:3, done:false }

// 这里不再通过另一个 `next(..)` 调用来继续执行，
// 而是产生一个异常：
it.throw( "Oops!" ); // Error: Oops!

显然，反向的异常处理也是可以的：

function *foo() {
    var x = yield 3;
    var y = x.toUpperCase(); // 会产生一个 TypeError 异常！
    yield y;
}

var it = foo();

it.next(); // { value:3, done:false }

try {
    it.next( 42 ); // `42` 没有 `toUpperCase()` 方法
}
catch (err) {
    console.log( err ); // TypeError (来自调用`toUpperCase()`)
}

委托生成器

另一个你想要做的，或许是在生成器函数的内部调用另一个生成器。我说的不是正常的调用方式，而是将迭代控制 委托到 另一个生成器。这么做，我们要使用 yield 关键字的一个变种：yield *（“yield 星号”）。

示例：

function *foo() {
    yield 3;
    yield 4;
}

function *bar() {
    yield 1;
    yield 2;
    yield *foo(); // `yield *` 将迭代控制委托给了 `foo()`
    yield 5;
}

for (var v of bar()) {
    console.log( v );
}
// 1 2 3 4 5

和在第一部分（使用 function *foo() { } 而非 function* foo() { } 形式）的理由相同，这里使用 yield *foo() 而不是其他文章或文档里的 yield* foo()。我认为这样可以更准确和清晰地表明其目的。

接下来我们分解下上面的过程。yield 1 和 yield 2 将值直接返回给了 for..of 循环的（隐含的）next() 调用，这个我们已经知道了。

然后 yield* 出现了，这里是实际上是通过实例化了 foo() 然后跳转（yielding）了过去，这样 yield 3 和 yield 4 将值返回给了 for..of 循环。

一旦 yield* 完成，控制权就又回到了原来的生成器，最后调用了 yield 5。

为了简单，这里只是把值都返回了。不过，当然也可以通过 next(..) 来手动调用并传入数据，将数据也会和预想中一样通过 yield* 委托传入：

function *foo() {
    var z = yield 3;
    var w = yield 4;
    console.log( "z: " + z + ", w: " + w );
}

function *bar() {
    var x = yield 1;
    var y = yield 2;
    yield *foo(); // `yield*` delegates iteration control to `foo()`
    var v = yield 5;
    console.log( "x: " + x + ", y: " + y + ", v: " + v );
}

var it = bar();

it.next();      // { value:1, done:false }
it.next( "X" ); // { value:2, done:false }
it.next( "Y" ); // { value:3, done:false }
it.next( "Z" ); // { value:4, done:false }
it.next( "W" ); // { value:5, done:false }
// z: Z, w: W

it.next( "V" ); // { value:undefined, done:true }
// x: X, y: Y, v: V

这里只演示了一层委托，但没有理由说 *foo() 不能再委托到另一个生成器，以及更多。

有个“技巧”是 yield 可以从委托生成器那里获取到一个返回值：

function *foo() {
    yield 2;
    yield 3;
    return "foo"; // return value back to `yield*` expression
}

function *bar() {
    yield 1;
    var v = yield *foo();
    console.log( "v: " + v );
    yield 4;
}

var it = bar();

it.next(); // { value:1, done:false }
it.next(); // { value:2, done:false }
it.next(); // { value:3, done:false }
it.next(); // "v: foo"   { value:4, done:false }
it.next(); // { value:undefined, done:true }

可以看到，yield *foo() 将迭代控制（下一个 next() 调用）委托出去，知道委托的生成器执行完毕，此时，foo() 的返回值（这里是字符串值 "foo"）作为 yield * 表达式的值返回，然后被赋值给了局部变量 v。

这是 yield 与 yield* 的一个有趣的差别：使用 yield 表达式，结果会在随后 next(..) 返回，但使用 yield* 表达式，获得的是委托生成器的返回值（因为 next(..) 返回的数据已传递给了委托生成器）。

可以在 yield*委托上执行两个方向的异常处理（见前文）：

function *foo() {
    try {
        yield 2;
    }
    catch (err) {
        console.log( "foo caught: " + err );
    }

    yield; // 暂停

    // 抛出异常
    throw "Oops!";
}

function *bar() {
    yield 1;
    try {
        yield *foo();
    }
    catch (err) {
        console.log( "bar caught: " + err );
    }
}

var it = bar();

it.next(); // { value:1, done:false }
it.next(); // { value:2, done:false }

it.throw( "Uh oh!" ); // 会在 `foo()` 内部被捕获
// foo caught: Uh oh!

it.next(); // { value:undefined, done:true }  --> 没有异常！
// bar caught: Oops!

在上例中，throw("Uh oh!") 将异常通过 yield* 委托传递给了 *f00() 内部的 try..catch。同样地，*foo() 内部的 throw "Oop!" 将异常传递给了 *bar()，而后者通过另一个 try..catch 捕获了这个异常。如果没有捕获这两个异常，那么它们会按照期望的方式向上传递。

总结

生成器有着同步执行的语义，这意味可以通过 try..catch 来处理 yield 语句的错误。生成器迭代器还有一个 throw(..) 方法用于在暂停的位置抛出一个异常到生成器中，这也可以通过生成器内部的 try..catch 进行捕获。

yield* 使得可以将迭代控制从当前生成器委托到另一个生成器。yield* 的执行结果可以双向打通，这意味数据和错误都可以进行传递。

不过，到目前为止，有一个基本的问题还没有回答：生成器在异步代码模式上如何帮助我们？我们从这两篇文章看到的都是生成器函数的同步迭代。

关键在于构造一个机制，使得生成器可以暂停从而启动一个异步的任务，并等待异步任务结束后再继续（通过迭代器的 next() 调用）。在下一篇文章中，我们将探索通过生成器来创建异步控制的几种方法。请继续关注！

---

译注

有关生成器委托，文章中的情况是其中一种，对于 yield* 表达式来说，其接收的值只需要是支持 iterable 接口的对象即可，如数组、字符串。所以，其实也支持：

function* foo() {
  yield* [1, 2, 3, 4, 5];
}

遍历上面的生成器函数得到的生成器对象，可以进一步得到数组的所有值。

参考：yield* - MDN