es6中Generator函数的语法

一、Generator 函数有多种理解

1、语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。
2、执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。
3、形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态

function* helloWorldGenerator() { //ES6 没有规定，function与函数名之间的星号，写在哪个位置
//该函数有三个状态：hello，world 和 return 语句（结束执行）
  yield 'hello';
  yield 'world';
  return 'ending';
}

//Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号
//不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果
//而是一个指向内部状态的指针对象，也就是遍历器对象（Iterator Object）
var hw = helloWorldGenerator();

下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。换言之，Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。

hw.next()   // { value: 'hello', done: false }
hw.next()   // { value: 'world', done: false }
hw.next()   // { value: 'ending', done: true }
hw.next()   // { value: undefined, done: true }  以后再调用next方法，返回的都是这个值

每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield表达式后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。

二、yield表达式：暂停标志，只有当调用next方法、内部指针指向该语句时才会执行

遍历器对象的next方法的运行逻辑如下：
（1）遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。
（2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。
（3）如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。
（4）如果该函数没有return语句，则返回的对象的value属性值为undefined。

注意，yield表达式只能用在 Generator 函数里面，用在其他地方都会报错

三、next方法的参数

yield表达式本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。

function* f() {
  for(var i = 0; true; i++) {
    //如果next方法没有参数，每次运行到yield表达式，变量reset的值总是undefined
    var reset = yield i; 
    if(reset) { i = -1; }
  }
}
var g = f();

g.next() // { value: 0, done: false }
g.next() // { value: 1, done: false }
//当next方法带一个参数true时，变量reset就被重置为这个参数（即true），因此i会等于-1
g.next(true) // { value: 0, done: false }

function* foo(x) {
  var y = 2 * (yield (x + 1));
  var z = yield (y / 3);
  return (x + y + z);
}

var a = foo(5);
a.next() // {value:6, done:false}
a.next() // {value:NaN, done:false} 上一次field表达式结果为undefined，2*undefined=NaN
a.next() // {value:NaN, done:true}

var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false } ,一次field表达式结果为12，2*12/3=8
b.next(13) // { value:42, done:true }

四、for…of循环

for…of循环可以自动遍历 Generator 函数运行时生成的Iterator对象，且此时不再需要调用next方法，一旦next方法的返回对象的done属性为true，for…of循环就会中止，且不包含该返回对象，所以下面代码的return语句返回的6，不包括在for…of循环之中。

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

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

五、return方法

可以返回给定的值，并且终结遍历 Generator 函数，如果return方法不提供参数，则返回值的value属性为undefined

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 }

六、Generator函数的this

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

function* g() {}
g.prototype.hello = function () {
  return 'hi!';
};

let obj = g();   //obj是g的实例，继承了g.prototype，generator函数不能跟new命令一起用

obj instanceof g // true
obj.hello() // 'hi!'

function* gen() {
  this.a = 1;
  yield this.b = 2;
  yield this.c = 3;
}

function F() {
  return gen.call(gen.prototype);
}

var f = new F();

f.next();  // Object {value: 2, done: false}
f.next();  // Object {value: 3, done: false}
f.next();  // Object {value: undefined, done: true}

f.a // 1
f.b // 2
f.c // 3