本文共--字 阅读约--分钟 | 浏览: -- Last Updated: 2020-08-11
Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。
Generator 函数是一个状态机，封装了多个内部状态。
执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。
形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态。
function* helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}
var hw = helloWorldGenerator()
// 该函数有三个状态：hello，world 和 return 语句（结束执行）。
// 返回的hw 也不是函数运行结果，而是一个指向内部状态的指针对象，也就是上一章介绍的遍历器对象。
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表达式（或return语句）为止。换言之，Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。
遍历器对象的next方法的运行逻辑如下：
1.遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。
2.下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。
3.如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。
4.如果该函数没有return语句，则返回的对象的value属性值为undefined。
yield表达式后面的表达式，只有当调用next方法、内部指针指向该语句时才会执行，因此等于为 JavaScript 提供了手动的“惰性求值”（Lazy Evaluation）的语法功能。
function* gen() {
yield 123 + 456;
}
// 表达式123 + 456，不会立即求值
// 只会在next方法将指针移到这一句时，才会求值。
Generator 函数可以返回一系列的值，因为可以有任意多个yield。从另一个角度看，也可以说 Generator 生成了一系列的值，这也就是它的名称的来历(生成器)。
Generator 函数可以不用yield表达式，这时就变成了一个单纯的暂缓执行函数。
function* f() {
console.log('执行了！')
}
var generator = f(); // console不会执行
setTimeout(function () {
generator.next() // 在调用next的时候才会执行
}, 2000);
在这里，函数f如果是普通函数，在为变量generator赋值时就会执行。但是，函数f是一个 Generator 函数，就变成只有调用next方法时，函数f才会执行。
由于 Generator 函数就是遍历器生成函数，因此可以把 Generator 赋值给对象的Symbol.iterator属性，从而使得该对象具有 Iterator 接口。
var myIterable = {};
myIterable[Symbol.iterator] = function* () {
yield 1;
yield 2;
yield 3;
};
[...myIterable] // [1, 2, 3]
Generator 函数执行后，返回一个遍历器对象。该对象本身也具有Symbol.iterator属性，执行后返回自身。
function* gen(){
// some code
}
var g = gen();
g[Symbol.iterator]() === g
// true
yield表达式本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield 表达式的返回值。
function* f() {
for(var i = 0; true; i++) {
var reset = yield i;
if(reset) { i = -1; } // 第三次将true传递给reset i = -1，然后在++变为0
}
}
var g = f();
g.next() // { value: 0, done: false }
g.next() // { value: 1, done: false }
g.next(true) // { value: 0, done: false }
这个功能有很重要的语法意义。Generator 函数从暂停状态到恢复运行，它的上下文状态（context）是不变的。通过next方法的参数，就有办法在 Generator 函数开始运行之后，继续向函数体内部注入值。也就是说，可以在 Generator 函数运行的不同阶段，从外部向内部注入不同的值，从而调整函数行为。
// yield表达式如果用在另一个表达式之中，必须放在圆括号里面。用作函数参数或放在赋值表达式的右边，可以不加括号。
function* 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: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 } 这次调用之后y变成了24
b.next(13) // { value:42, done:true } 这次调用之后z变成了13
由于next方法的参数表示上一个yield表达式的返回值，所以在第一次使用next方法时，传递参数是无效的。
再看一个通过next方法的参数，向 Generator 函数内部输入值的例子。
function* dataConsumer() {
console.log('Started');
console.log(`1. ${yield}`);
console.log(`2. ${yield}`);
return 'result';
}
let genObj = dataConsumer();
genObj.next(); // {value: undefined, done : false}
// Started 执行了第一个console
genObj.next('a') // {value: undefined, done : false}
// 1. a 执行了第二个console
genObj.next('b') // {value: result, done : true}
// 2. b 执行了第三个console
如果想要第一次调用next方法时，就能够输入值，可以在 Generator 函数外面再包一层。
function wrapper(generatorFunction) {
return function (...args) {
let generatorObject = generatorFunction(...args);
// 第一次next在这里调用
generatorObject.next();
return generatorObject;
};
}
const wrapped = wrapper(function* () {
console.log(`First input: ${yield}`);
return 'DONE';
});
wrapped().next('hello!') //{value : 'DONE', done: true}
// First input: hello! 8
function* foo() {
yield 1;
yield 2;
return 3;
}
for (let v of foo()) {
console.log(v);
}
// 1 2
// 一旦next方法的返回对象的done属性为true
// for...of循环就会中止，且不包含该返回对象
// 所以上面代码的return 3，不包括在for...of循环之中。
Generator 函数返回的遍历器对象，都有一个throw方法，可以在函数体外抛出错误，然后在 Generator 函数体内捕获。
throw方法可以接受一个参数，该参数会被catch语句接收，建议抛出Error对象的实例。
var g = function* () {
try {
yield;
} catch (e) {
console.log(e);
}
};
var i = g();
i.next();
i.throw(new Error('出错了！'));
// Error: 出错了！(…)
上面代码的错误，是用遍历器对象的throw方法抛出的，而不是用throw命令抛出的，后者只能被函数体外的catch语句捕获。
如果 Generator 函数内部没有部署try...catch代码块，那么throw方法抛出的错误，将被外部try...catch代码块捕获。
如果 Generator 函数内部和外部，都没有部署try...catch代码块，那么程序将报错，直接中断执行。
throw方法抛出的错误要被内部捕获，前提是必须至少执行过一次next方法。
function* gen() {
try {
yield 1;
} catch (e) {
console.log('内部捕获');
}
}
var g = gen();
g.throw(1);
// Uncaught 1
g.throw(1)执行时，next方法一次都没有执行过。这时，抛出的错误不会被内部捕获，而是直接在外部抛出，导致程序出错。第一次执行next方法，等同于启动执行 Generator 函数的内部代码，否则 Generator 函数还没有开始执行，这时throw方法抛错只可能抛出在函数外部。
throw方法被捕获以后，会附带执行下一条yield表达式。也就是说，会附带执行一次next方法。
var gen = function* gen(){
try {
yield console.log('a');
} catch (e) {
// ...
}
yield console.log('b');
yield console.log('c');
}
var g = gen();
g.next() // a
g.throw() // b
g.next() // c
g.throw方法被捕获以后，自动执行了一次next方法，所以会打印b。另外，也可以看到，只要 Generator 函数内部部署了try...catch代码块，那么遍历器的throw方法抛出的错误，不影响下一次遍历。
一旦 Generator 执行过程中抛出错误，且没有被内部捕获，就不会再执行下去了。如果此后还调用next方法，将返回一个{ value: undefined, done: true }，即 JavaScript 引擎认为这个 Generator 已经运行结束了。
Generator 函数返回的遍历器对象，还有一个return方法，可以返回给定的值，并且终结遍历 Generator 函数。
function* gen() {
yield 1;
yield 2;
yield 3;
}
var g = gen();
g.next() // { value: 1, done: false }
g.return('foo') // { value: "foo", done: true }
// return方法调用时，不提供参数，则返回值的value属性为undefined。
g.next() // { value: undefined, done: true }
如果 Generator 函数内部有try...finally代码块，且正在执行try代码块，那么return方法会推迟到finally代码块执行完再执行。
function* numbers () {
yield 1;
try {
yield 2;
yield 3;
} finally {
yield 4;
yield 5;
}
yield 6;
}
var g = numbers();
g.next() // { value: 1, done: false }
g.next() // { value: 2, done: false }
g.return(7) // { value: 4, done: false }
g.next() // { value: 5, done: false }
g.next() // { value: 7, done: true }
// return方法后，就开始执行finally代码块
// 然后等到finally代码块执行完，再执行return方法。
next()、throw()、return()这三个方法本质上是同一件事，可以放在一起理解。它们的作用都是让 Generator 函数恢复执行，并且使用不同的语句替换yield表达式。
next()是将yield表达式替换成一个值。
const g = function* (x, y) {
let result = yield x + y;
return result;
};
const gen = g(1, 2);
gen.next(); // 启动 Object {value: 3, done: false}
gen.next(1); // Object {value: 1, done: true}
// 相当于将 let result = yield x + y
// 替换成 let result = 1;
// 如果next方法没有参数，就相当于替换成undefined。
throw()是将yield表达式替换成一个throw语句
gen.throw(new Error('出错了')); // Uncaught Error: 出错了
// 相当于将 let result = yield x + y
// 替换成 let result = throw(new Error('出错了'));
return()是将yield表达式替换成一个return语句。
gen.return(2); // Object {value: 2, done: true}
// 相当于将 let result = yield x + y
// 替换成 let result = return 2;
ES6 提供了yield*表达式，用来在一个 Generator 函数里面执行另一个 Generator 函数。
function* foo() {
yield 'a';
yield 'b';
}
function* bar() {
yield 'x';
yield* foo();
yield 'y';
}
// 等同于
// yield*后面的 Generator 函数（没有return语句时），不过是for...of的一种简写形式。
function* bar() {
yield 'x';
for (let v of foo()) {
yield v;
}
yield 'y';
}
// 使用for of
for (let v of bar()){
console.log(v);
}
// "x"
// "a"
// "b"
// "y"
// 如果foo() 有 return
function* foo() {
yield 'a';
yield 'b';
return 'c';
// 上面的for of 还是一样会输出x a b y
}
// 除非bar像下面这样写 才会输出 x a b c y
// 因为foo() 在执行到return的时候 done就是true for...of循环就会中止，且不包含该返回对象
function* bar() {
yield 'x';
yield yield* foo();
yield 'y';
}
再来看一个对比的例子
function* inner() {
yield 'hello!';
}
function* outer1() {
yield 'open';
yield inner();
yield 'close';
}
var gen = outer1()
gen.next().value // "open"
gen.next().value // 返回一个遍历器对象
gen.next().value // "close"
function* outer2() {
yield 'open'
yield* inner()
yield 'close'
}
var gen = outer2()
gen.next().value // "open"
gen.next().value // "hello!"
gen.next().value // "close"
从语法角度看，如果yield表达式后面跟的是一个遍历器对象，需要在yield表达式后面加上星号，表明它返回的是一个遍历器对象。这被称为yield*表达式。
任何数据结构只要有 Iterator 接口，就可以被yield*遍历。
function* gen(){
yield* ["a", "b", "c"];
}
gen().next() // { value:"a", done:false }
// yield命令后面如果不加星号，返回的是整个数组
// 加了星号就表示返回的是数组的遍历器对象。
let read = (function* () {
yield 'hello';
yield* 'hello';
})();
read.next().value // "hello"
read.next().value // "h"
// yield*语句返回单个字符
// 因为字符串具有 Iterator 接口，所以被yield*遍历。
如果被代理的 Generator 函数有return语句，那么就可以向代理它的 Generator 函数返回数据
function* foo() {
yield 2;
return "foo";
}
function* bar() {
yield 1;
var v = yield* foo();
// foo() 有 return 所有 ”foo“就是 yield* foo()的值
console.log("v: " + v);
yield 3;
}
var it = bar();
it.next()
// {value: 1, done: false}
it.next()
// {value: 2, done: false}
it.next();
// "v: foo"
// {value: 3, done: false}
it.next()
// {value: undefined, done: true}
yield*命令可以很方便地取出嵌套数组的所有成员。
function* iterTree(tree) {
if (Array.isArray(tree)) {
for(let i=0; i < tree.length; i++) {
yield* iterTree(tree[i]);
}
} else {
yield tree;
}
}
const tree = [ 'a', ['b', 'c'], ['d', 'e'] ];
[...iterTree(tree)] // ["a", "b", "c", "d", "e"]
Generator 函数总是返回一个遍历器，ES6 规定这个遍历器是 Generator 函数的实例，也继承了 Generator 函数的prototype对象上的方法。
function* g() {}
g.prototype.hello = function () {
return 'hi!';
};
let obj = g();
obj instanceof g // true
obj.hello() // 'hi!'
g返回的总是遍历器对象，而不是this对象。 如果函数g在this对象上面添加了一个属性a，但是obj对象拿不到这个属性。
function* g() {
this.a = 11; // 这个this指向调用者window
}
let obj = g();
obj.next();
obj.a // undefined
console.log(window.a) // 11
console.log(a) // 11
Generator 函数也不能跟new命令一起用，会报错。
如何让 Generator 函数返回一个正常的对象实例，获得正常的this以及才能够使用new呢
function* g() {
this.a = 1; // 此时的this执行g.prototype
yield this.b = 2;
yield this.c = 3;
// 所以next调用完之后 g.prototype上就有了a b c三个属性
}
// 只是一个包装函数，最后实际上new的是F，是不能使用 new g()的，会报错
function F() {
return g.call(g.prototype);
}
var f = new F();// new F() 返回的就是遍历器对象
// 这个遍历器对象 就是g的实例
// 所以可以使用f.a 访问到 g.prototype.a
f.next(); // Object {value: 2, done: false}
f.next(); // Object {value: 3, done: false}
f.next(); // Object {value: undefined, done: true}
// 必须要调用next 使g函数中个的代码执行完毕
f.a // 1
f.b // 2
f.c // 3
Generator 函数的暂停执行的效果，意味着可以把异步操作写在yield表达式里面，等到调用next方法时再往后执行。这实际上等同于不需要写回调函数了，因为异步操作的后续操作可以放在yield表达式下面，反正要等到调用next方法时再执行。
function* loadUI() {
showLoadingScreen();
yield loadUIDataAsynchronously();
hideLoadingScreen();
}
var loader = loadUI();
// 加载UI
loader.next()
// 卸载UI
loader.next()
// 第一次调用loadUI函数时，该函数不会执行，仅返回一个遍历器。
// 下一次对该遍历器调用next方法，则会显示Loading界面（showLoadingScreen）
// 并且异步加载数据（loadUIDataAsynchronously）。
// 等到数据加载完成，再一次使用next方法，则会隐藏Loading界面。
Ajax 是典型的异步操作，通过 Generator 函数部署 Ajax 操作，可以用同步的方式表达。
function* main() {
var result = yield request("http://some.url");
var resp = JSON.parse(result); // 此时 result 就是 response
console.log(resp.value);
}
function request(url) {
makeAjaxCall(url, function(response){
it.next(response); // 第二次调用将response赋值第一次yield
});
}
var it = main();
it.next(); // 第一次调用启动函数
for...of的本质是一个while循环var it = iterateJobs(jobs);
var res = it.next();
while (!res.done){
var result = res.value;
// ...
res = it.next();
}