1. Generator函数是ES6提供的一种异步变成解决方案,语法行为与传统函数完全不同。

Generator函数有多种理解角度，语法上，可以将Generator函数理解为状态机，封装了多个内部状态。

执行Generator函数会返回一个遍历器对象，可以依次遍历Generator函数中的每一个状态。

Generator函数有两个特征：一是，function关键字紧跟一个*号；二是，函数体内部使用yield表达式，定义不同的内部状态。

yield能返回跟在语句后面的表达式的值。

  1. function* helloWorldGenerator() {
  2.   yield 'hello'
  3.   yield 'world'
  4.   return 'ending'
  5. }
  7. var it = helloWorldGenerator()
  9. console.log(it.next())
  10. console.log(it.next())
  11. console.log(it.next())

如果helloWorldGenerator函数没有return ‘ending’，那么第三次调用next函数的返回值中,value = undefined.

  1. // 星号位置，都可以
  2. function* generator() { }
  3. function *generator() { }
  4. function * generator() { }
  5. function*generator() { }

yield 表达式

yield表达式就是Generator函数暂停执行的标志。

遍历器的next方法运行如下：

  • 第一次执行next(),遇到yield表达式，就暂停后面的操作，并将紧跟yield后的表达式的值，作为返回对象value的值。
  • 下一次调用next方法时，再继续执行，直到遇到下一个yield表达式。
  • 如果没有遇到yield表达式，就一直运行到函数结束，直到return语句为止，并将return后的表达式的值，作为返回对象的value属性的值。
  • 如果没有return语句，那么返回对象的value属性的值为undefined。

与Iterator接口的关系

对于任意一个对象的System.iterator方法，等于该对象的遍历器生成函数，调用该函数
会返回该对象的一个遍历器对象。

  1. var myIterator = {};
  2. myIterator[Symbol.iterator] = function*() {
  3.   yield 1;
  4.   yield 2;
  5.   yield 3;
  6.   yield 4;
  7. }
  9. console.log([...myIterator])

next方法的参数

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

该例子可以证明，yield返回值总是undefined，除非next方法传参。

  1. function* f() {
  2.   for (var i = 0; true; i++){
  3.     var reset = yield i;
  5.     console.log(reset)
  6.     if (reset) {
  7.       i = -1;
  8.     }
  9.   }
  10. }
  12. var g = f();
  13. console.log(g.next());
  14. console.log(g.next());
  15. console.log(g.next());
  16. console.log(g.next());
  17. console.log(g.next());
  18. console.log(g.next());
  19. console.log(g.next());
  20. // console.log(g.next(true));

下面这个例子说明 yield表达式本身是返回undefined的，除非next方法传参

  1. function* foo(x) {
  2.   var y = 2 * (yield x + 1)
  3.   var z = yield y / 3
  4.   return x + y + z
  5. }
  7. var a = foo(5)
  8. // 6
  9. console.log(a.next())
  10. NaN
  11. console.log(a.next())
  12. NaN
  13. console.log(a.next())
  15. var b = foo(5)
  16. // 6
  17. console.log(b.next())
  18. 8
  19. console.log(b.next(12))
  20. // 42 y=24 z=13 x=5 
  21. console.log(b.next(13))

下面再来一个面试题，看看结果是什么

  1. function* dataConsumer() {
  2.   console.log('started');
  3.   console.log(`1. ${yield}`)
  4.   console.log(`2. ${yield}`)
  5.   return 'result'
  6. }
  8. var it = dataConsumer();
  10. // started
  11. console.log(it.next())
  13. // 1. a
  14. console.log(it.next('a'))
  15. // 1. b
  16. console.log(it.next('b'))

for…of 循环

for…of循环能够遍历Generator函数运行时生成的Iterator对象，并且不需要调用next方法。

  1. function* foo() {
  2.   yield 1;
  3.   yield 2;
  4.   yield 3;
  5.   yield 4;
  6.   yield 5;
  7.   return 6;
  8. }
  10. let it = foo();
  12. for (let key of it) {
  13.   console.log(key)
  14. }

如果你运行这个代码就会发现，return的6没有输出，这是因为next方法返回对象的done属性为true时，for…of就会停止执行。

除了for…of外，扩展运算符（…），解构赋值和Array.form方法内部调用的，都是遍历器接口。这意味着他们都可以将Generator函数返回的遍历器对象作为参数。

  1. function* foo() {
  2.   yield 1;
  3.   yield 2;
  4.   yield 3;
  5.   return 4;
  6.   yield 5;
  7. }
  9. // 扩展运算符
  10. console.log([...foo()])
  12. // Array.from
  13. console.log(Array.from(foo()))
  15. // 解构赋值
  16. var [a, ...b] = foo()
  18. console.log(a)
  19. console.log(b)

Generator.prototype.throw()

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

  1. function* g() {
  2.   try {
  3.     yield;
  4.   } catch (e) {
  5.     console.log('函数内部捕获错误', e)
  6.   }
  7.   return 123123
  8. }
  10. var it = g();
  11. console.log(it.next()) 
  13. try {
  14.   it.throw('a');
  15.   it.throw('b');
  17.   it.throw(new Error('记住，这么抛错误！'))
  18. } catch (e) {
  19.   console.log('函数体外捕获错误', e)
  20. }

Generator.prototype.return()

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

  1. function* foo() {
  2.   yield 1;
  3.   yield 1;
  4.   yield 1;
  5.   return 4;
  6. }
  8. var it = foo();
  10. console.log(it.next())
  11. console.log(it.return(666))

如果Generator函数内部有try…finally代码块，且正在执行try块，那么return方法会推迟到finally块执行完后再执行

  2. // 即使return 也会先执行finally 
  3. function* foo2() {
  4.   yield 1
  5.   try {
  6.     yield 2
  7.     yield 3
  8.   } finally {
  9.     yield 4;
  10.     yield 5;
  11.   }
  12. }
  15. var it2 = foo2();
  17. console.log(it2.next())
  18. // 此处注意，要是没有执行到try内部，则finally不会执行。
  19. // console.log(it2.next())
  20. console.log(it2.return(555))
  21. console.log(it2.next())

next()、throw()、return() 的共同点

他们的作用都是让Generator函数恢复执行，并且使用不同的语句替换yield表达式。

next()是将yield表达式替换为一个值。

  1. function* foo() {
  2.   let res =  yield 1;
  3.   return res
  4. }
  6. var it = foo()
  7. console.log(it.next())
  8. console.log(it.next(123123))

第二个next(123123)相当于把yield表达式的值替换为123123，如果next参数为空，相当于替换为undefined;

throw()是将yield表达式替换成一个throw语句。

  1. var it2 = foo();
  3. console.log(it2.next())
  4. console.log(it2.throw(new Error('又错了！')))

return()是将yield表达式替换成一个return语句。

  2. var it3 = foo();
  3. console.log(it3.next())
  4. console.log(it3.return(666))

yield* 表达式

在一个Generator函数内部，调用另一个Generator函数，需要在前者的函数体内，手动完成遍历

  1. function* foo() {
  2.   yield 1;
  3.   yield 2;
  4.   return 3;
  5. }
  7. function* bar() {
  8.   yield 'x';
  9.   for (let i of foo()) {
  10.     console.log(i)
  11.   }
  12. }
  14. for (let i of bar()) {
  15.   console.log(i)
  16. }

如果在bar函数内部调用多个Generator函数，处理就会变得特别麻烦，所以出现了yield*表达式。

  1. // yield*版本
  2. function* bar2() {
  3.   yield 'x'
  4.   yield* foo()
  5.   yield 'y'
  6.   return 'zzz';
  7. }
  9. let it2 = bar2();
  10. console.log(it2.next())
  11. console.log(it2.next())
  12. console.log(it2.next())
  13. console.log(it2.next())
  14. console.log(it2.next())
  17. // 等同于
  18. function* bar3() {
  19.   yield 'x';
  20.   yield 1;
  21.   yield 2
  22.   yield 'y'
  23.   return 'zzz'
  24. }
  25. console.log('\n')
  27. // 等同于
  28. function* bar4() {
  29.   yield 'x';
  30.   for (let v of foo()) {
  31.     yield v
  32.   }
  34.   yield 'y'
  35.   return 'zzz'
  36. }
  38. for (let v of bar4()) {
  39.   console.log(v)
  40. }

再看下面的一个例子，outer2用了yield, outer1没用，结果是outer1返回了一个遍历器对象，outer2返回了遍历器对象内部的值。
从语法的角度看，如果yield后面跟着一个遍历器对象，那么需要在yield后加星号，表明它返回的是遍历器对象。这称为yield表达式

  1. function* inner() {
  2.   yield 'hello';
  3. }
  5. function* outer1() {
  6.   yield 'open';
  7.   yield inner()
  8.   yield 'close';
  9. }
  11. var it1 = outer1();
  12. console.log(it1.next())
  13. console.log(it1.next())
  14. console.log(it1.next())
  15. console.log(it1.next())
  18. console.log(`\n outer2 `)
  19. function* outer2() {
  20.   yield 'open';
  21.   yield* inner()
  22.   yield 'close'
  23. }
  25. var it2 = outer2();
  26. console.log(it2.next())
  27. console.log(it2.next())
  28. console.log(it2.next())
  29. console.log(it2.next())

再看下面这段代码，delegratingIterator是代理者，delegratedIterator是被代理者。由yield* delegratedIterator语句得到的是一个遍历器，所以要用星号表示。
运行结果就是使用了一个遍历器，遍历了多个Generator函数，有递归的效果。

  1. let delegratedIterator = (function* () { 
  2.   yield 'hello';
  3.   yield 'bye'
  4. }())
  6. let delegratingIterator = (function* () {
  7.   yield 'Greeting';
  8.   yield* delegratedIterator;
  9.   yield 'ok, bye'
  10. }())
  12. for (let value of delegratingIterator) {
  13.   console.log(value)
  14. }

作为对象属性的Generator函数

  1. let obj = {
  2.   *myGeneratorMethods() {
  3.     yield 3
  4.     yield 4
  5.     return 5
  6.   }
  7. }
  9. for (let value of obj.myGeneratorMethods()) {
  10.   console.log(value)
  11. }
  13. console.log(`\n 另一种方式声明对象方法`)
  15. // 上面的写法等同于下面
  16. let obj2 = {
  17.   myGeneratorMethods: function* () {
  18.     yield 1;
  19.     return 2;
  20.   }
  21. }
  23. for (let value of obj2.myGeneratorMethods()) {
  24.   console.log(value)
  25. }

Generator函数的this

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

  1. function* foo() {
  3. }
  5. foo.prototype.hello = function () {
  6.   return 'hello'
  7. }
  9. let obj = foo();
  10. console.log(obj instanceof foo)
  12. console.log(obj.hello())

上述代码表明，Generator函数foo返回的遍历器obj，是foo的实例，同时也继承了foo.prototype。

含义

Generator与状态机

  1. var ticking = true;
  3. var clock = function () {
  4.   if (ticking) {
  5.     console.log('tick')
  6.   } else {
  7.     console.log('tock')
  8.   }
  9.   ticking = !ticking
  10. }
  12. clock()
  13. clock()
  14. clock()
  16. // Generator版本
  17. function* clock2() {
  18.   while (true) {
  19.     console.log('tick')
  20.     yield
  21.     console.log('tock')
  22.     yield
  23.   }
  24. }
  26. var it = clock2();
  27. console.log(it.next())
  28. console.log(it.next())
  29. console.log(it.next())

Generator实现与ES5的实现相比，少了外部保存状态的ticking变量，更简洁、安全。Generator之所以不用保存状态，是因为它本身就包含了一个状态信息，
即目前是否出于暂停状态。