欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ECMAScript6入门第十八章-Generator函数的语法

程序员文章站 2022-06-13 07:52:59
...

简介:

基本概念:

Generator函数是ES6提供的一种异步编程解决方案。

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

执行Generator函数会返回一个遍历器对象,也就是说,Generator函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历Generator函数内部的每一个状态。

形式上,Generator函数是一个普通函数,但是有两个特征。一是,function关键字与函数名之间有一个星号;二是,函数体内部使用yield表达式,定义不同的内部状态。

ES6没有规定,function关键字与函数名之间的星号,写在哪个位置。这导致下面吧的写法都能通过,但是一般的写法是第三种。

function * foo(x, y) { ··· }
function *foo(x, y) { ··· }
function* foo(x, y) { ··· }
function*foo(x, y) { ··· }
function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

上面代码定义了一个Generator函数helloWorldGenerator,它内部有两个yeild表达式,即该函数有三个状态:hello,world和return语句(结束执行)。

然后,Generator函数的调用方法与普通函数一样,也是在函数名后加上一对圆括号。不同的是,调用Generator函数后,该函数并不执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象,也就是遍历器对象。

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

第一次调用,Generator函数开始执行,直到遇到第一个yield表达式为止。next方法返回一个对象,它的value属性就是当前yield表达式的值hello,done属性的值false,表示遍历还没结束。

第二次调用,Generator函数从上次yield表达式停下的地方,一直执行到下一个yield表达式。next方法返回的对象的value属性就是当前yield表达式的值world,done属性的值false,表示遍历还没有结束。

第三次调用,Generator函数从上次yield表达式停下来的地方,一直执行到return语句,如果没有return语句,就执行到函数结束。next方法返回的对象的value属性,就是紧跟在return语句后面的表达式的值,如果没有return语句,则value属性的值为undefined。done属性的值为true,表示遍历已经结束。

第四次调用,此时Generator函数已经运行完毕,next方法返回对象的value属性为undefined,done属性为true。以后再调用next方法,返回的都是这个值。

总结一下,调用Generator函数,返回一个遍历器对象,代表generator函数的内部指针。以后,每次调用遍历器对象的next方法,就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值,是yield表达式后面那个表达式的值;done属性是一个布尔值,表示是否遍历结束。

yield表达式:

由于Generator函数返回的遍历器对象,只有调用next方法才会遍历下一个内部状态,所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。

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

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

yield表达式后面的表达式,只有当调用next方法、内部指针指向该语句时才会执行,因此等于为JavaScript提供了手动的惰性求值的语法功能。

function* gen() {
  yield  123 + 456;
}

上面代码中,yield后面的表达式123+456,不会立即求值,只会在next方法将指针移到这一句时,才会求值。

yield表达式与return语句既有相似之处,也有区别。相似之处在于,都能返回紧跟在语句后面的那个表达式的值。区别在于每次遇到yield,韩式暂停执行,下一次再从该位置继续向后执行,而return语句不具备位置记忆的功能。一个函数里面,只能执行一次或者说一个return语句,但是可以执行多次或者说多个yield表达式,正常函数只能返回一个值,因此只能执行一次return;Generator函数可以返回一系列的值,因为可以有任意多个yield。

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

function* gen() {
  yield  123 + 456;
}

yield表达式智能用在Generator函数里面,用在其他地方都会报错。

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