基本概念
Generator函数有多种理解角度。从语法上，首先可以把它理解成，Generator函数是一个状态机，封装了多个内部状态。
执行Generator函数会返回一个遍历器对象，也就是说，Generator函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历Generator函数内部的每一个状态。
形式上，Generator函数是一个普通函数，但是有两个特征。
-
function关键字与函数名之间有一个星号；
- 函数体内部使用
yield语句，定义不同的内部状态（yield语句在英语里的意思就是“产出”）。
function* helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}
var hw = helloWorldGenerator();
上面代码定义了一个Generator函数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',1)"> { value: 'ending',done: true }
{ 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属性是一个布尔值，表示是否遍历结束。
ES6没有规定，function关键字与函数名之间的星号，写在哪个位置。这导致下面的写法都能通过。
function * foo(x,y) { ··· }
foo(x,1)">function*foo(x,y) { ··· }
由于Generator函数仍然是普通函数，所以一般的写法是上面的第三种，即星号紧跟在function关键字后面。本书也采用这种写法。
yield语句
由于Generator函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield语句就是暂停标志。
遍历器对象的next方法的运行逻辑如下。
（1）遇到yield语句，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。
（2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield语句。
（3）如果没有再遇到新的yield语句，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。
（4）如果该函数没有return语句，则返回的对象的value属性值为undefined。
需要注意的是，yield语句后面的表达式，只有当调用next方法、内部指针指向该语句时才会执行，因此等于为JavaScript提供了手动的“惰性求值”（Lazy Evaluation）的语法功能。
gen() {
yield 123 + 456;
}
上面代码中，yield后面的表达式123 + 456，不会立即求值，只会在next方法将指针移到这一句时，才会求值。
Generator函数可以不用yield语句，这时就变成了一个单纯的暂缓执行函数。
f() {
console.log('执行了！')
}
var generator = f();
setTimeout(function () {
generator.next()
},2000);
上面代码中，函数f如果是普通函数，在为变量generator赋值时就会执行。但是，函数f是一个Generator函数，就变成只有调用next方法时，函数f才会执行。
另外需要注意，yield语句不能用在普通函数中，否则会报错。
( (){
yield 1;
})()
SyntaxError: Unexpected number
上面代码在一个普通函数中使用yield语句，结果产生一个句法错误。
yield语句如果用在一个表达式之中，必须放在圆括号里面。
console.log('Hello' + yield); SyntaxError
console.log('Hello' + yield 123); SyntaxError
console.log('Hello' + (yield)); OK
console.log('Hello' + (yield 123)); OK
yield语句用作函数参数或赋值表达式的右边，可以不加括号。
foo(yield 'a',yield 'b'); OK
let input = yield; OK
与Iterator接口的关系
上一章说过，任意一个对象的Symbol.iterator方法，等于该对象的遍历器生成函数，调用该函数会返回该对象的一个遍历器对象。
由于Generator函数就是遍历器生成函数，因此可以把Generator赋值给对象的Symbol.iterator属性，从而使得该对象具有Iterator接口。
var myIterable = {};
myIterable[Symbol.iterator] = () {
yield 1;
yield 2;
yield 3;
};
[...myIterable] [1,2,3]
上面代码中，Generator函数赋值给Symbol.iterator属性，从而使得myIterable对象具有了Iterator接口，可以被...运算符遍历了。
Generator函数执行后，返回一个遍历器对象。该对象本身也具有Symbol.iterator属性，执行后返回自身。
next方法的参数
yield句本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield语句的返回值。
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) 上面代码先定义了一个可以无限运行的Generator函数f，如果next方法没有参数，每次运行到yield语句，变量reset的值总是undefined。当next方法带一个参数true时，当前的变量reset就被重置为这个参数（即true），因此i会等于-1，下一轮循环就会从-1开始递增。
这个功能有很重要的语法意义。Generator函数从暂停状态到恢复运行，它的上下文状态（context）是不变的。通过next方法的参数，就有办法在Generator函数开始运行之后，继续向函数体内部注入值。也就是说，可以在Generator函数运行的不同阶段，从外部向内部注入不同的值，从而调整函数行为。
再看一个例子。
foo(x) {
var y = 2 * (yield (x + 1));
var z = yield (y / 3);
return (x + y + z);
}
var a = foo(5);
a.next() Object{value:6,done:false}
a.next() Object{value:NaN,done:true}
var b = foo(5);
b.next() { value:6,done:false }
b.next(12) { value:8,done:false }
b.next(13) { value:42,done:true }
上面代码中，第二次运行next方法的时候不带参数，导致y的值等于2 * undefined（即NaN），除以3以后还是NaN，因此返回对象的value属性也等于NaN。第三次运行Next方法的时候不带参数，所以z等于undefined，返回对象的value属性等于5 + NaN + undefined，即NaN。
如果向next方法提供参数，返回结果就完全不一样了。上面代码第一次调用b的next方法时，返回x+1的值6；第二次调用next方法，将上一次yield语句的值设为12，因此y等于24，返回y / 3的值8；第三次调用next方法，将上一次yield语句的值设为13，因此z等于13，这时x等于5，y等于24，所以return语句的值等于42。
注意，由于next方法的参数表示上一个yield语句的返回值，所以第一次使用next方法时，不能带有参数。V8引擎直接忽略第一次使用next方法时的参数，只有从第二次使用next方法开始，参数才是有效的。从语义上讲，第一个next方法用来启动遍历器对象，所以不用带有参数。
如果想要第一次调用next方法时，就能够输入值，可以在Generator函数外面再包一层。
wrapper(generatorFunction) {
return (...args) {
let generatorObject = generatorFunction(...args);
generatorObject.next();
return generatorObject;
};
}
const wrapped = wrapper( () {
console.log(`First input: ${yield}`);
return 'DONE';
});
wrapped().next('hello!')
First input: hello!
上面代码中，Generator函数如果不用wrapper先包一层，是无法第一次调用next方法，就输入参数的。
for...of循环
for...of循环可以自动遍历Generator函数，且此时不再需要调用next方法。
foo() {
yield 1;
yield 4;
yield 5return 6for (let v of foo()) {
console.log(v);
}
1 2 3 4 5
上面代码使用for...of循环，依次显示5个yield语句的值。这里需要注意，一旦next方法的返回对象的done属性为true，for...of循环就会中止，且不包含该返回对象，所以上面代码的return语句返回的6，不包括在for...of循环之中。
利用for...of循环，可以写出遍历任意对象的方法。原生的JavaScript对象没有遍历接口，无法使用for...of循环，通过Generator函数为它加上这个接口，就可以用了。
objectEntries(obj) {
let propKeys = Reflect.ownKeys(obj);
(let propKey of propKeys) {
yield [propKey,obj[propKey]];
}
}
let jane = { first: 'Jane',last: 'Doe' };
(let [key,value] of objectEntries(jane)) {
console.log(`${key}: ${value}`);
}
first: Jane
// last: Doe
上面代码中，对象jane原生不具备Iterator接口，无法用for...of遍历。这时，我们通过Generator函数objectEntries为它加上遍历器接口，就可以用for...of遍历了。加上遍历器接口的另一种写法是，将Generator函数加到对象的Symbol.iterator属性上面。
objectEntries() {
let propKeys = Object.keys(this);
[propKey]];
}
}
let jane = { first: 'Jane',1)"> };
jane[Symbol.iterator] = objectEntries;
last: Doe
Generator.prototype.throw()
Generator函数返回的遍历器对象，都有一个throw方法，可以在函数体外抛出错误，然后在Generator函数体内捕获。
var g = () {
try {
yield;
} catch (e) {
console.log('内部捕获',e);
}
};
var i = g();
i.next();
{
i.throw('a');
i.throw('b');
} (e) {
console.log('外部捕获' 内部捕获 a 外部捕获 b
上面代码中，遍历器对象i连续抛出两个错误。第一个错误被Generator函数体内的catch语句捕获。i第二次抛出错误，由于Generator函数内部的catch语句已经执行过了，不会再捕捉到这个错误了，所以这个错误就被抛出了Generator函数体，被函数体外的catch语句捕获。
如果Generator函数内部没有部署try...catch代码块，那么throw方法抛出的错误，将被外部try...catch代码块捕获。
while (true) {
yield;
console.log('内部捕获' 外部捕获 a
上面代码中，遍历器函数g内部没有部署try...catch代码块，所以抛出的错误直接被外部catch代码块捕获。
如果Generator函数内部部署了try...catch代码块，那么遍历器的throw方法抛出的错误，不影响下一次遍历，否则遍历直接终止。
var gen = gen(){
{
yield console.log('hello');
} (e) {
...
}
yield console.log('world');
}
gen();
g.next();
g.throw();
g.next();
hello world
上面代码在两次next方法之间，使用throw方法抛出了一个错误。由于这个错误在Generator函数内部被捕获了，所以不影响第二次next方法的执行。
gen(){
yield console.log('hello');
yield console.log('world' gen();
g.next();
{
throw new Error();
} (e) {
g.next();
}
world
上面代码中，throw命令抛出的错误不会影响到遍历器的状态，所以两次执行next方法，都取到了正确的操作。
如果Generator函数内部有try...finally代码块，那么return方法会推迟到finally代码块执行完再执行。
numbers () {
yield 1 {
yield 2;
yield 3;
} finally {
yield 4;
yield 5;
}
yield 6;
}
numbers()
g.next() { done: false,value: 1 }
g.next() return(7)
g.next() { done: true,value: 7 }
上面代码中，调用return方法后，就开始执行finally代码块，然后等到finally代码块执行完，再执行return方法。
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
