Generator函数

概念

Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。

yield

运行逻辑

遍历器对象的next方法的运行逻辑如下。

1. 遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。

2. 下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。

3. 如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。

4. 如果该函数没有return语句，则返回的对象的value属性值为undefined。

需要注意的是，yield表达式后面的表达式，只有当调用next方法、内部指针指向该语句时才会执行，因此等于为 JavaScript 提供了手动的“惰性求值”（Lazy Evaluation）的语法功能。

yield只能用在Generator函数里面

(function (){
  yield 1;
})()
// SyntaxError: Unexpected number

上面代码在一个普通函数中使用yield表达式，结果产生一个句法错误。

yield在另外的表达式中，必须放在圆括号中

function* demo() {
    console.log('Hello' + yield)       // SyntaxError
    console.log('Hello' + yield 123)   // SyntaxError
    
    console.log('Hello' + (yield))     // OK
    console.log('Hello' + (yield 123)) // OK
}

暂缓执行

Generator 函数可以不用yield表达式，这时就变成了一个单纯的暂缓执行函数。

function* f() {
  console.log('执行了！')
}

var generator = f();

setTimeout(function () {
  generator.next()
}, 2000);

上面代码中，函数f如果是普通函数，在为变量generator赋值时就会执行。但是，函数f是一个 Generator 函数，就变成只有调用next方法时，函数f才会执行。

next()

next 方法可以带有一个参数，该参数会被当做上一条 yield 语句的返回值。

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 }