Generator函数

基本概念

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

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

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

形式上,Generator函数是一个普通函数,但是有两个特征:一是function命令与函数名之间有一个星号;而是函数体内部使用yield语句定义不同的内部状态(yield意思为产出)。

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

上面的代码定义了一个Generator函数-helloWorldGenerator,它内部有两个yield语句”hello”和”world”,即该函数有3个状态:hello、world和return语句(结束执行)。

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

下一步,必须调用遍历器对象的next方法,使得指针移向下一个状态。也就是说,每次调用next方法,内部指针就从函数头部或上一次停下来的地方开始执行,直到遇到下一条yield语句(或return语句)为止。换言之,Generator函数是分段执行的,yield语句是暂停执行的标记,而next方法可以恢复执行。

console.log( hw.next() );//{ value: 'hello', done: false }

console.log( hw.next() );//{ value: 'world', done: false }

console.log( hw.next() );//{ value: 'ending', done: true }

console.log( hw.next() );//{ value: undefined, done: true }

上面的代码一共调用了4次next方法。

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

第2次,第3次调用类似,都是从上次yield语句停下的地方,一直执行到下一条yield语句或return语句。

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

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

ES6没有规定function关键字与函数名之间的星号写在哪个位置。这导致下面的写法都能通过。

function * foo(x, y) { }
function *foo(x, y) { }
function* foo(x, y) { }
function*foo(x, y) { }

一般采用第3种写法。

yield语句

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

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

Generator函数可以不用yield语句,这时就变成了一个单纯的暂缓执行函数。

function* f() {
  console.log('执行了!');
}
var generator = f();

setTimeout(function () {
  generator.next();
},2000);

上面的代码中,函数f如果是普通函数,在为变量generator赋值时就会执行。但是函数f是一个Generator函数,于是就变成只有调用next方法时才会执行。

注意:yield语句不能用在普通函数中,否则会报错。

Generator函数应用的一个简单例子

var arr = [1,[[2,3],4],[5,6]];

var flat = function* (a) {
   var len = a.length;
   for(var i=0;ivar item = a[i];
     if(typeof item!== 'number'){
       yield* flat(item);
     }else{
       yield item;
     }
   }
}

for(var f of flat(arr)){
  console.log(f);
}
//1,2,3,4,5,6

next方法的参数

yield语句本身没有返回值,或者说总是返回undefined。next方法可以带一个参数,该参数会被当作上一条yield语句的返回值。

function* f() {
  for(var i=0;true;i++){
    var reset = yield i;
    if(reset) {i=-1;}
  }
}
var g = f();
g.next();//{value: 0, done: false}
g.next();//{value: 1, done: false}
g.next(true);//{value: 0, done: false}

以上定义了一个可以无限运行的Generator函数f,如果next方法没有参数,每次运行到yield语句,变量reset的值总是undefined。当next方法带一个参数true时,当前变量reset就被重置为这个参数(即true),因而i会等于-1,下一轮循环就从-1开始递增。

这个功能的意义:Generator函数从暂停状态恢复运行,其上下文状态是不变的。通过next方法的参数就有办法在Generator函数开始运行后继续向函数体内部注入值。也就是说,可以在Generator函数运行的不同阶段,从外部内部注入不同的值,从而调整函数的行为。

以下是next方法带参数的另一个例子

function* foo(x) {
  var y = 2*(yield(x+1));
  var z = yield(y/3);
  return (x+y+z);
}
var a = foo(5);
console.log(a.next());
console.log(a.next());
console.log(a.next());
//{ value: 6, done: false }
//{ value: NaN, done: false }
//{ value: NaN, done: true }

var b = foo(5);
console.log(b.next());
console.log(b.next(12));
console.log(b.next(13));
//{ value: 6, done: false }
//{ value: 8, done: false }
//{ value: 42, done: true }

注意:由于next方法表示上一条yield语句的返回值,所以第一次使用next方法时不能带有参数。

你可能感兴趣的:(ES6)