Generator 详解

1、什么是Generator函数

Generator与普通函数的区别是在定义的时候有个*，例如：

function* helloGenerator() {
  console.log("this is Generator")
}

执行函数

function* helloGenerator() {
  console.log("this is Generator")
}
helloGenerator()//并没有执行

我们发现并没有像普通函数一样输入打印日志。作如下修改：

function* helloGenerator() {
  console.log("this is Generator")
}
var hg = helloGenerator()
hg.next()

这个时候如期的打印了日志。对于Generator函数，下面的语句

hg = helloGenerator()

只是创建了这个函数的句柄，并没有实际执行，需要进一步调用next()，才能触发方法。

function* helloGenerator() {
  yield "hello"
  yield "generator"
  return
}
var hg = helloGenerator()// 创建hg对象，指向helloGenerator的句柄
console.log(hg.next())//{value: 'hello', done: false} 
//第一次调用next()，执行到'yield "hello"'暂缓执行，并返回了'hello'
console.log(hg.next())//{value: 'generator', done: false} 
//第二次调用next()，继续上一次的执行，执行到'yield "generator"'，暂缓执行，并返回"generator"
console.log(hg.next())//{value: 'undefined', done: true} 
//第三次调用next(),直接执行return，并返回done:true,表明结束

yield实际上就是暂缓执行的标示，每执行一次next()，相当于指针指向下一个yield位置。
Generator是ES6提供的一种异步编程解决方案。通过yield标示位和next()方法调用，实现函数的分段执行。

2、Generator函数和迭代器(Iterator)

经过Iterator详解的学习，我们队迭代器接口的next方法并不陌生，Genterator函数也涉及到next()方法的调用，他们之间有什么关系呢？实现了迭代器接口的对象都可以for-of实现遍历。我们来测试一下：

function* helloGenerator() {
  yield "hello"
  yield "generator"
  return
}
var hg = helloGenerator()
for(var val of hg){
  console.log(val)//"hello","generator"
}

helloGenerator对象是支持for-of循环的，也说明Generator函数在原型上实现了迭代器接口，上面调用的next()方法实际上就是迭代器的next()方法。我们继续看next()方法。

function* gen(x,y){
  let z = yield x+y
  let result = yield z*x
  return result
}
let g = gen(3,4)
console.log(g.next())//{value:7,done:false}
//第一次调用next()方法，运行"yield x+y"，并返回x+y的运算结果
console.log(g.next())//{value:NaN,done:false}
//第二次调用next()方法，运行"yield z*x",此时应该z为7，运算结果为21才对，为何是NaN呢？前一次运行"yield x+y"的值并没有保存,let z = x + y，结果let z = undefined，所以z*x的结果为NaN

那有没有办法解决这个问题，我们来改一下这个例子：

function* gen(x,y){
  let z = yield x+y
  let result = yield z*x
  return result
}
let g = gen(3,4)
console.log(g.next())//{value:7,done:false}
console.log(g.next(11))//{value:21,done:false}

但是不能每次都计算好上次的结果，再传给下一个next()，有屁用，我们往下看：

function* gen(x,y){
  let z = yield x+y
  let result = yield z*x
  return result
}
let g = gen(3,4)
let z = g.next()
console.log(z)//{value:7,done:false}
console.log(g.next(z))//{value:21,done:false}

这样就OK了
迭代器（Iterator)还有个return()方法：

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

执行return后就返回done: true，Generator函数遍历终止，后面的yield 3就不会在执行了。
与next()方法一样，return()也可以带参数。

function* gen(x,y) {
  yield 1
  yield 2
  yield 3
}
var g = gen()
g.next()//{value: 1,done: false}
g.next()//{value: 2,done: false}
g.return(6)//{value: 6,done: true}
g.next()//{value: undefined,done: true}

3、yield表达式
上面说yield是Generator函数的暂缓执行的标识，对于yield只能配合Generator函数使用，在普通的函数中使用会报错。如下：

function gen(x,y) {
  yield 1
  yield 2
  yield 3
}//报错

Generator函数中还有一种yield*这个表达式，如下：

function* foo() {
  yield "a"
  yield "b"
}
function* gen(x,y) {
  yield 1
  yield 2
  yield* foo()
  yield 3
}
var g = gen()
console.log(g.next())//{value: 1,done: false}
console.log(g.next())//{value: 2,done: false}
console.log(g.next())//{value: "a",done: false}
console.log(g.next())//{value: "b",done: false}
console.log(g.next())//{value: 3,done: false}

当执行yield*时，实际上遍历后面的Generator函数，等价于下面的写法

function* foo() {
  yield "a"
  yield "b"
}
function* gen(x,y) {
  yield 1
  yield 2
  for(var val of foo()) {
    yield val
  }
  yield 3
}

注意yield*后面只能适配Generator函数