Generator执行步骤浅析

在Generator函数出现之前JS的函数只能返回一个值，返回的方式就是return，但是Generator函数可以返回多个值，返回的方式是yield。并且Generator赋予了外部动态影响函数内部的执行顺序的能力。

基础语法

function* f () {
  const a = yield 1
  console.log(a)
  const b = yield 2
  console.log(b)
}

var ff = f()

ff.next() // {done: false, value: 1}
ff.next(10) // {done: false, value: 2}
ff.next(20) // {done: true, value: undefined}

上面函数执行的时候，并没有开始执行函数体内的内容。当执行ff的next方法的时候开始执行函数体内容，直到yield为止。当遇到yield 则将yield后面的表达式计算出的结果返回到Generator函数外。执行next方法则再次从中断的地方（上次执行yield跳出函数的地方）进入到Generator函数内部执行，而next的参数就被当做yield表达式的计算结果。

有感

通过上面的描述可以看出是yield和next方法做的事情就是转让执行权，当执行遇到yield的时候会将结果返回到函数外，也就是将执行权交到了函数外面，那么什么时候再回来执行Generator内部代码就要看外部什么时候调用next方法。

一个简单让Generator函数自执行函数

function singleCo (ge) {
  var ff = ge()
  
  function next (val) {
    var res = ff.next(val) // 将执行权交到Generator内部
    if (res.done) {
      console.log('Generator函数执行完毕')
    } else {
      console.log(res.value)
      res.value(next) // 将改变执行权的权利交给了，yield出来的chunk函数()
    }
   }
  
  next()
}

上面的函数需要Generator内yield表达式返回的是一个特殊的函数，这个函数会接收一个函数做回调。

function* ge () {
  var a = yield function (cb) {cb(1)}
  console.log(a)
  var b = yield function (cb) {cb(2)}
  console.log(b)
}

开始执行

singleCo(ge) // 会自执行打印出 1 2

参考

Generator 函数的语法