Generator函数介绍

什么事Generator函数

1. Generator函数是ES6提供的一种异步编程解决方案, 可以把Generator函数看做是一个状态机 ,封装了多个内部状态.

2.执行Generator函数会返回一个遍历器对象, 也就是说, Generator函数除了状态机, 还是一个遍历器对象生成函数.

外观上的变化

形式上Generator函数是一个普通的函数, 但是有两个特征

1. function关键字与函数名之间有一个星号
2. 函数体内部使用yield语句, 定义不同的内部状态

function* helloWorldGenerator() { 
  yield 'hello'; 
  yield 'world'; 
  return 'ending';
}
var hw = helloWorldGenerator();

上面定义了一个helloWorldGenerator, 它内部有两个yield语句hello和world, 即函数有三个状态: hello, world和return语句(结束执行)

generator函数的调用方法和普通的函数一样, 也是在函数名后面加上一对圆括号. 不同的地方在于Generator函数返回的是一个遍历器对象(Iterator Object)

下一步必须调用遍历器的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方法

yield语句

由于Generator函数返回的是一个遍历器对象, 只有调用next方法的时, 才会进入下一个内部状态, 所以提供了一个可是暂停执行的函数. yield语句就是暂停的标志

next方法的运行逻辑

1. 遇到yield语句, 就暂停执行后面的操作, 并将紧跟在yield后面的那个表达式的值, 作为返回对象的value属性
2. 下次调用next方式时, 再继续往下执行, 直到遇到下一个yield语句
3. 如果没有再次遇到新的yield语句, 就一直运行的函数结束, 直到return位置, 并将return语句后面的表达式的值, 作为返回对象的value属性的值
4. 如果函数没有return语句, 则返回对象的value属性为undefined

yield和return的差异

1. 每次遇到yield函数都会暂停执行, 下一次再从该位置继续向后执行, 而return语句不具备位置记忆功能.
2. yield在一个函数中可以执行多次, 而return只能执行一次
3. 正常的函数只能返回一个值, 因为只能执行一次return语句, Generator函数可以返回一系列的值, 以为可以有任意多个yield. 也可以说是生成了一系列之, 这也就是他名字的来历(generator这个词是生成器的意思)

yield和return的相同点

• 他们都返回紧跟在语句后面的那个表达式

Note: 在普通函数中使用yield语句会报错