深入理解Generator

这篇文章旨在帮你真正了解Generator，文章较长，不过如果能花时间耐心看完，相信你已经能够完全理解generator

为什么要用generator

在前端开发过程中我们经常需要先请求后端的数据，再用拿来的数据进行使用网页页面渲染等操作，然而请求数据是一个异步操作，而我们的页面渲染又是同步操作，这里ES6中的generator就能发挥它的作用，使用它可以像写同步代码一样写异步代码。下面是一个例子，先忽略下面的写法，后面会详细说明。如果你已经理解generator基础可以直接跳过这部分和语法部分，直接看深入理解的部分。

function *foo() {
  // 请求数据
  var data = yield makeAjax('http://www.example.com');
  render(data);
}

在等待数据的过程中会继续执行其他部分的代码，直到数据返回才会继续执行foo中后面的代码，这是怎么实现的那？我们都知道js是单线程的，就是说我们不可能同时执行两段代码，要实现这种效果，我们先来猜想下，我们来假设有一个“王杖”（指代cpu的执行权），谁拿到这个“王杖”，谁就可以做自己想做的事，现在代码执行到foo我们现在拿着“王杖”然后向服务器请求数据，现在数据还没有返回，我们不能干等着。作为王我们有着高尚的马克思主义思想，我们先把自己的权利交出去，让下一个需要用的人先用着，当然前提是要他们约定好一会儿有需要，再把“王杖”还给我们。等数据返回之后，我们再把我们的“王杖”要回来，就可以继续做我们想做的事情了。
如果你理解了这个过程，那么恭喜你，你已经基本理解了generator的运行机制，我这么比喻虽然有些过程不是很贴切，但基本是这么个思路。更多的东西还是向下看吧。

generator语法

generator函数

在用generator之前，我们首先要了解它的语法。在上面也看到过，它跟函数声明很像，但后面有多了个*号，就是function *foo() { }，当然也可以这么写function* foo() { }。这里两种写法没有任何区别，全看个人习惯，这篇文章里我会用第一种语法。现在我们按这种语法声明一个generator函数，供后面使用。

function *foo() {

}

yield

到目前为止，我们还什么也干不了，因为我们还缺少了一个重要的老伙计yield。yield翻译成汉语是产生的意思。yield会让我们跟在后面的表达式执行，然后交出自己的控制权，停在这里，直到我们调用next()才会继续向下执行。这里新出现了next我们先跳过，先说说generator怎么执行。先看一个例子。

function *foo() {
  var a = yield 1 + 1;
  var b = yield 2 + a;
  console.log(b);
}

var it = foo();
it.next();
it.next(2);
it.next(4);

下面我们来逐步分析，首先我们定义了一个generator函数foo，然后我们执行它foo()，这里跟普通函数不同的是，它执行完之后返回的是一个迭代器，等着我们自己却调用一个又一个的yield。怎么调用那，这就用到我们前面提到的next了，它能够让迭代器一个一个的执行。好，现在我们调用第一个it.next()，函数会从头开始执行，然后执行到了第一个yield，它首先计算了1 + 1，嗯，然后停了下来。然后我们调用第二个it.next(2)，注意我这里传入了一个2作为next函数的参数，这个2传给了a作为它的值，你可能还有很多其他的疑问，我们详细的后面再说。接着来，我们的it.next(2)执行到了第二个yield，并计算了2 + a由于a是2所以就变成了2 + 2。第三步我们再调用it.next(4)，过程跟上一步相同，我们把b赋值为4继续向下执行，执行到了最后打印出我们的b为4。这就是generator执行的全部的过程了。现在弄明白了yield跟next的作用，回到刚才的问题，你可能要问，为什么要在next中传入2和4，这里是为了方便理解，我手动计算了1 + 1和2 + 2的值，那么程序自己计算的值在哪里？是next函数的返回值吗，带着这个疑问，我们来看下面一部分。

next的参数

next可以传入一个参数，来作为上一次yield的表达式的返回值，就像我们上面说的it.next(2)会让a等于2。当然第一次执行next也可以传入一个参数，但由于它没有上一次yield所以没有任何东西能够接受它，会被忽略掉，所以没有什么意义。

next的返回值

在这部分我们说说next返回值，废话不多说，我们先打印出来，看看它到底是什么，你可以自己执行一下，也可以直接看我执行的结果。

function *foo() {
  var a = yield 1 + 1;
  var b = yield 2 + a;
  console.log(b);
}

var it = foo();
console.log(it.next());
console.log(it.next(2));
console.log(it.next(4));

执行结果：

{ value: 2, done: false }
{ value: 4, done: false }
4
{ value: undefined, done: true }

看到这里你会发现，yield后面的表达式执行的结果确实返回了，不过是在返回值的value字段中，那还有done字段使用来做什么用的那。其实这里的done是用来指示我们的迭代器，就是例子中的it是否执行完了，仔细观察你会发现最后一个it.next(4)返回值是done: true的，前面的都是false，那么最后一个打印值的undefined又是什么那，因为我们后面没有yield了，所以这里没有被计算出值，那么怎么让最后一个有值那，很简单加个return。我们改写下上面的例子。

function *foo() {
  var a = yield 1 + 1;
  var b = yield 2 + a;
  return b + 1;
}

var it = foo();
console.log(it.next());
console.log(it.next(2));
console.log(it.next(4));

执行结果：

{ value: 2, done: false }
{ value: 4, done: false }
{ value: 5, done: true }

最后的next的value的值就是最终return返回的值。到这里我们就不再需要手动计算我们的值了，我们在改写下我们的例子。

function *foo() {
  var a = yield 1 + 1;
  var b = yield 2 + a;
  return b + 1;
}

var it = foo();
var value1 = it.next().value;
var value2 = it.next(value1).value;
console.log(it.next(value2));

大功告成！这些基本上就完成了generator的基础部分。但是还有更多深入的东西需要我们进一步挖掘，看下去，相信你会有收获的。

深入理解

前两部分我们学习了为什么要用generator以及generator的语法，这些都是基础，下面我们来看点不一样的东西，老规矩先带着问题才能更有目的性的看，这里先提出几个问题：

怎样在异步代码中使用，上面的例子都是同步的啊
如果出现错误要怎么进行错误的处理
一个个调用next太麻烦了，能不能循环执行或者自动执行那

迭代器

进行下面所有的部分之前我们先说一说迭代器，看到现在，我们都知道generator函数执行完返回的是一个迭代器。在ES6中同样提供了一种新的迭代方式for...of，for...of可以帮助我们直接迭代出每个的值，在数组中它像这样。

for (var i of ['a', 'b', 'c']) {
  console.log(i);
}

// 输出结果
// a
// b
// c

下面我们用我们的generator迭代器试试

function *foo() {
  yield 1;
  yield 2;
  yield 3;
  return 4;
}

// 获取迭代器
var it = foo();

for(var i of it) {
  console.log(i);
}

// 输出结果
// 1
// 2
// 3

现在我们发现for...of会直接取出我们每一次计算返回的值，直到done: true。这里注意，我们的4没有打印出来，说明for...of迭代，是不包括done为true的时候的值的。

下面我们提一个新的问题，如果在generator中执行generator会怎么样？这里我们先认识一个新的语法yield *，这个语法可以让我们在yield跟一个generator执行器，当yield遇到一个新的generator需要执行，它会先将这个新的generator执行完，再继续执行我们当前的generator。这样说可能不太好理解，我们看代码。

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

function * bar() {
  yield 1;
  yield *foo();
  yield 5;
}

for ( var v of bar()) {
  console.log(v);
}

这里有两个generator我们在bar中执行了foo，我们使用了yield *来执行foo，这里的执行顺序会是yield 1，然后遇到foo进入foo中，继续执行foo中的yield 2直到foo执行完毕。然后继续回到bar中执行yield 5所以最后的执行结果是：

异步请求

我们上面的例子一直都是同步的，但实际上我们的应用是在异步中，我们现在来看看异步中怎么应用。

function request(url) {
  makeAjaxCall(url, function(response) {
    it.next(response);
  })
}

function *foo() {
  var data = yield request('http://api.example.com');
  console.log(JSON.parse(data));
}

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

这里又回到一开头说的那个例子，异步请求在执行到yield的时候交出控制权，然后等数据回调成功后在回调中交回控制权。所以像同步一样写异步代码并不是说真的变同步了，只是异步回调的过程被封装了，从外面看不到而已。

错误处理

我们都知道在js中我们使用try...catch来处理错误，在generator中类似，如果在generator内发生错误，如果内部能处理，就在内部处理，不能处理就继续向外冒泡，直到能够处理错误或最后一层。

内部处理错误：

// 内部处理
function *foo() {
  try {
    yield Number(4).toUpperCase();
  } catch(e) {
    console.log('error in');
  }
}

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

// 运行结果：error in

外部处理错误：

// 外部处理
function *foo() {
  yield Number(4).toUpperCase();
}

var it = foo();
try {
  it.next();
} catch(e) {
  console.log('error out');
}

// 运行结果：error out

在generator的错误处理中还有一个特殊的地方，它的迭代器有一个throw方法，能够将错误丢回generator中，在它暂停的地方报错，再往后就跟上面一样了，如果内部能处理则内部处理，不能内部处理则继续冒泡。

内部处理结果：

function *foo() {
  try {
    yield 1;
  } catch(e) {
    console.log('error', e);
  }
  yield 2;
  yield 3;
}

var it = foo();
it.next();
it.throw('oh no!');

// 运行结果：error oh no!

外部处理结果：

function *foo() {
  yield 1;
  yield 2;
  yield 3;
}

var it = foo();
it.next();
try {
  it.throw('oh no!');
} catch (e) {
  console.log('error', e);
}

// 运行结果：error oh no!

根据测试，发现迭代器的throw也算作一次迭代，测试代码如下：

function *foo() {
  try {
    yield 1;
    yield 2;
  } catch (e) {
    console.log('error', e);
  }
  yield 3;
}

var it = foo();
console.log(it.next());
it.throw('oh no!');
console.log(it.next());

// 运行结果
// { value: 1, done: false }
// error oh no!
// { value: undefined, done: true }

当用throw丢回错误的时候，除了try中的语句，迭代器迭代掉了yield 3下次再迭代就是，就是最后结束的值了。错误处理到这里就没有了，就这么点东西^_^。

自动运行

generator能不能自动运行？当然能，并且有很多这样的库，这里我们先自己实现一个简单的。

function run(g) {
  var it = g();

  // 利用递归进行迭代
  (function iterator(val) {
    var ret = it.next(val);

    // 如果没有结束
    if(!ret.done) {
      // 判断promise
      if(typeof ret.value === 'object' && 'then' in ret.value) {
        ret.value.then(iterator);
      } else {
        iterator(ret.value);
      }
    }
  })();
}

这样我们就能自动处理运行我们的generator了，当然我们这个很简单，没有任何错误处理，如何让多个generator同时运行，这其中涉及到如何进行控制权的转换问题。我写了一个简单的执行器Fo，其中包含了Kyle Simpson大神的一个ping-pong的例子，感兴趣的可以看下这里是传送门，当然能顺手star一下就更好了，see you next article ~O(∩_∩)O~。

深入理解Generator

为什么要用generator

generator语法

generator函数

yield

next

next的参数

next的返回值

深入理解

迭代器

异步请求

错误处理

自动运行

参考链接

张晓伟

引用和评论

深入理解-CSS内联元素之line-height

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高