es6 之 Generator（一）

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同

第一次接触这个函数的时候，第一印象是，这个单词咋读…

generator 美[ˈdʒɛnəˌretɚ]

然后是，这个函数是干啥的，好难理解啊，function*是啥啊，咋还有个*，咋看着像指针呢…看了好多次阮一峰老师的ECMAScript 6 入门,总算有了一些理解。

1.基本使用

来看一看基本使用吧（function后的*前后可以加空格，但是推荐下面的写法）

    function* stateMachine() {        yield 'hello';        yield 'world';        return 'ending';        yield 'haha';    }

以上函数定义了一个名为stateMachine的Generator函数，定义了两个内部状态，先产出’hello’，再产出’world’，最后执行’ending’。(return)后的(yield)不执行

来执行以下

    const result = stateMachine();    result.next(); // {value: "hello", done: false}    result.next(); // {value: "world", done: false}    result.next(); // {value: "ending", done: true}    result.next(); // {value: undefined, done: true}

Generator内部封装了多个状态。程序员可以自主的选择”产出”状态的时机，这里的”产出”也就是(yield),
但Generator不能够无序的”产出”，此时(done)的值为(false)，只能够按照设定的顺序，依次输出，也不能够进行”回溯”，当函数走到终点，
只能执行(return)，(done)属性的值也为(true)。此时再执行next()，得到的value永远就是undefined了。(done)也为(true)。(done)表示的就是程序走到了尽头。

Generator函数返回的结果是一个迭代器对象，他是一个指向内部状态的指针对象。这和Java中的迭代器的使用非常类似。
执行next()方法进行遍历。每次执行，指针指向下一个状态，yield所标注的位置就是下一个产出的位置，函数执行完成后，next()的返回值永远就是{value: undefined, done: true}

2.next 方法

next(n) n会被当做上一个yield表达式的返回值
这句话是什么意思，乍一看确实很难理解，来看一个例子

    function* f() {      for(var i = 0; true; i++) {        var reset = yield i;        if(reset) { i = -1; }      }    }    var g = f();    g.next() // { value: 0, done: false }    g.next() // { value: 1, done: false }    g.next(true) // { value: 0, done: false }

我们来仔细分析一下next方法的执行顺序：
1. 1.先找到函数中的第一个yield关键字，next方法即刻返回 输出{ value: ..., done: ... }（不管左侧是啥）
2. 2.返回完成后，yield 得到一个返回值，该值为下一个next方法的参数，默认为undefined，假如左侧是赋值语句，如上。第一个next()方法执行值时，rest的值都为undefined，所以下方if不通过。
程序此时执行到右方yield处停止，左方赋值尚未执行。等到下一个next方法执行后，再得到返回值，执行左方赋值语句(划重点)。这是Generator函数的执行机制
3. 3.但假如此时next方法得到一个参数(n)，该参数将作为刚刚暂停位置的yield的返回值。如上方代码，代码按照如下顺序：

第三次next执行后，rest被置为true，进入下方if语句，i被置为-1，进入第三次循环，i++，yield输出i此时为(0)

再来看一个例子来巩固Generator函数的执行机制

    function* foo(x) {      var y = 2 * (yield (x + 1));      var z = yield (y / 3);      return (x + y + z);    }    var a = foo(5);    a.next() // Object{value:6, done:false}    a.next() // Object{value:NaN, done:false}    a.next() // Object{value:NaN, done:true}    var b = foo(5);    b.next() // { value:6, done:false }    b.next(12) // { value:8, done:false }    b.next(13) // { value:42, done:true }

在这里再次强调yield的返回值和本身并无关系，他只是下一条next方法的参数。
如果你能够准确说出所有答案，那么就证明你能够较好的理解Generator的运行机制啦。

3.利用next方法注入参数

了解了以上知识，我们就可以利用next方法向Generator函数中注入参数，输出我们想要的结果。
但是从上面的例子看来，第一次执行next方法的参数是无效的，这怎么办呢，来再看一个例子：

    function wrapper(generatorFunction) {      return function (...args) {        let generatorObject = generatorFunction(...args);        generatorObject.next();        return generatorObject;      };    }    const wrapped = wrapper(function* () {      console.log(`First input: ${yield}`);      return 'DONE';    });    wrapped().next('hello!')    // First input: hello

哈哈，就是利用高阶函数，偷偷的先执行一次next方法，再返回这个”用过的”的迭代器对象，好让我们认为自己是”第一次”执行next方法就得到的输出结果

2.利用for…of遍历

在前面我们介绍过，for…of 是一个神奇的方法，可以遍历各种数据结构（除了对象）。既然Generator函数的返回值是一个迭代器对象，那当然可以用for…of来对他进行遍历了。

    function *foo() {      yield 1;      yield 2;      yield 3;      yield 4;      yield 5;      return 6;    }    for (let k of foo()) {      console.log(k);    }    // 1, 2, 3, 4, 5 没有6

for…of 会在每个yield处进行返回。其实他是找到所有(done)为(false)的结果，并把(value)进行输出
来感受一下用Generator实现的斐波那契数列

    function* fibonacci() {      let [prev, curr] = [0, 1];      for (;;) {        [prev, curr] = [curr, prev + curr];        yield curr;      }    }    for (let n of fibonacci()) {      if (n > 1000) break;      console.log(n);    }

3.Generator.prototype.throw()

Generator 函数返回的遍历器对象，都有一个throw方法，可以在函数体外抛出错误，然后在 Generator 函数体内捕获。

    var g = function* () {      try {        yield;      } catch (e) {        console.log('内部捕获', e);      }    };    var i = g();    i.next();    try {      i.throw('a');      i.throw('b');    } catch (e) {      console.log('外部捕获', e);    }    // 内部捕获 a    // 外部捕获 b

throw方法的参数直接传到Generator内部的catch中的e处

…在此先占一个空

4.Generator.prototype.return()

Generator 函数返回的遍历器对象，还有一个return方法，可以返回给定的值，并且终结遍历 Generator 函数。

    function* gen() {      yield 1;      yield 2;      yield 3;    }    var g = gen();    g.next()        // { value: 1, done: false }    g.return('foo') // { value: "foo", done: true }    g.next()        // { value: undefined, done: true }

5.yield*

如果在 Generator 函数内部，调用另一个 Generator 函数，默认情况下是没有效果的。

    function* foo() {      yield 'a';      yield 'b';    }    function* bar() {      yield 'x';      foo();      yield 'y';    }    for (let v of bar()){      console.log(v);    }    // "x"    // "y"

上面代码中，foo和bar都是 Generator 函数，在bar里面调用foo，是不会有效果的。

这个就需要用到yield*表达式，用来在一个 Generator 函数里面执行另一个 Generator 函数。
需要写成

   function* bar() {     yield 'x';     yield* foo();     yield 'y';   }   for (let v of bar()){     console.log(v);   }   // 'x'   // 'a'   // 'b'   // 'y'

yield*的本质其实就是对一个迭代器对象进行for…of遍历

    function* concat(iter1, iter2) {      yield* iter1;      yield* iter2;    }    // 等同于    function* concat(iter1, iter2) {      for (var value of iter1) {        yield value;      }      for (var value of iter2) {        yield value;      }    }

当目标函数中含有return时，yield*的返回值就为return的返回值。

6.Generator函数的this

Generator 函数总是返回一个遍历器，ES6 规定这个遍历器是 Generator 函数的实例，也继承了 Generator 函数的prototype对象上的方法。

    function* g() {}    g.prototype.hello = function () {      return 'hi!';    };    let obj = g();    obj instanceof g // true    obj.hello() // 'hi!'

上面代码表明，Generator 函数g返回的遍历器obj，是g的实例，而且继承了g.prototype。但是，如果把g当作普通的构造函数，并不会生效，因为g返回的总是遍历器对象，而不是this对象。
而且Generator函数也不能当做构造函数，也就是不能和(new)中一起使用

    function* g() {      this.a = 11;    }    let obj = g();    obj.a // undefined

Generator函数中的this指向window

…占空

7.Generator是一个状态机

Generator 是实现状态机的最佳结构。比如，下面的clock函数就是一个状态机。

    var ticking = true;    var clock = function() {      if (ticking)        console.log('Tick!');      else        console.log('Tock!');      ticking = !ticking;    }

上面代码的clock函数一共有两种状态（Tick和Tock），每运行一次，就改变一次状态。这个函数如果用 Generator 实现，就是下面这样。

    var clock = function* () {      while (true) {        console.log('Tick!');        yield;        console.log('Tock!');        yield;      }    };

上面的 Generator 实现与 ES5 实现对比，可以看到少了用来保存状态的外部变量ticking，这样就更简洁，更安全（状态不会被非法篡改）、更符合函数式编程的思想，在写法上也更优雅。Generator 之所以可以不用外部变量保存状态，是因为它本身就包含了一个状态信息，即目前是否处于暂停态。

8.异步操作中的应用

Generator的一个重要的实际意义就是处理异步操作，改写回调函数

    function* loadUI() {      showLoadingScreen();      yield loadUIDataAsynchronously();      hideLoadingScreen();    }    var loader = loadUI();    // 加载UI    loader.next()    // 卸载UI    loader.next()

第一次执行loader.next()，显示loading遮罩，并加载数据，第二次执行loader.next()，隐藏loading遮罩
如上代码，将所有loading页面需要的逻辑都封装在一个函数中，省去了回环曲折的回调函数，逻辑非常清楚。