1.generator的使用
generator感觉大多数人不太熟悉，所以有必要科普下使用方法。熟悉使用方法 的伙伴可以直接到第二节。
Generator函数跟普通函数的写法有非常大的区别：
- 一是，function关键字与函数名之间有一个星号；
- 二是，函数体内部使用yield语句，定义不同的内部状态（yield在英语里的意思就是“产出”）。
最简单的Generator函数如下：
1function* g() {
2 yield 'a';
3 yield 'b';
4 yield 'c';
5 return 'ending';
6}g函数呢，有四个阶段，分别是’a’,‘b’,‘c’,‘ending’。
Generator 函数神奇之一：g()并不执行g函数
g()并不会执行g函数，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是迭代器对象（Iterator Object）。
Generator 函数神奇之二：分段执行
先看如下代码：
1function* g() {
2 yield 'a';
3 yield 'b';
4 yield 'c';
5 return 'ending';
6}
7
8var gen = g();
9gen.next(); // 返回Object {value: "a", done: false}gen.next()返回一个非常非常简单的对象{value: "a", done: false}，‘a’就是g函数执行到第一个yield语句之后得到的值，false表示g函数还没有执行完，只是在这暂停。
如果再写一行代码，还是gen.next();，这时候返回的就是{value: "b", done: false}，说明g函数运行到了第二个yield语句，返回的是该yield语句的返回值’b’。返回之后依然是暂停。
再写一行gen.next();返回{value: "c", done: false}，再写一行gen.next();，返回{value: "ending", done: true}，这样，整个g函数就运行完毕了。
提问：如果再写一行gen.next();呢？
答：返回{value: undefined, done: true}，这样没意义。
提问：如果g函数没有return语句呢？
答：那么第三次.next()之后就返回{value: undefined, done: true}，这个第三次的next()唯一意义就是证明g函数全部执行完了。
提问：如果g函数的return语句后面依然有yield呢？
答：js的老规定：return语句标志着该函数所有有效语句结束，return下方还有多少语句都是无效，白写。
提问：如果g函数没有yield和return语句呢？
答：第一次调用next就返回{value: undefined, done: true}，之后也是{value: undefined, done: true}。
提问：如果只有return语句呢？
答：第一次调用就返回{value: xxx, done: true}，其中xxx是return语句的返回值。之后永远是{value: undefined, done: true}。
提问：下面代码会有什么结果？
1function* g() {
2 var o = 1;
3 yield o++;
4 yield o++;
5 yield o++;
6
7}
8var gen = g();
9
10console.log(gen.next()); // 1
11
12var xxx = g();
13
14console.log(gen.next()); // 2
15console.log(xxx.next()); // 1
16console.log(gen.next()); // 3答：见上面注释。每个迭代器之间互不干扰，作用域独立。
继续提问：如果第二个yield o++;改成yield;会怎样？
答：那么指针指向这个yield的时候，返回{value: undefined, done: false}。
继续提问：如果第二个yield o++;改成o++;yield;会怎样？
答：那么指针指向这个yield的时候，返回{value: undefined, done: false}，因为返回的永远是yield后面的那个表达式的值。
所以现在可以看出，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield语句（或return语句）为止。换言之，Generator函数是分段执行的，yield语句是暂停执行的标记，而next方法可以恢复执行。
总之，每调用一次Generator函数，就返回一个迭代器对象，代表Generator函数的内部指针。以后，每次调用迭代器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield语句后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。
所以可以看出，Generator 函数的特点就是：
- 1、分段执行，可以暂停
- 2、可以控制阶段和每个阶段的返回值
- 3、可以知道是否执行到结尾
yield语句
迭代器对象的next方法的运行逻辑如下。
（1）遇到yield语句，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。
（2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield语句。
（3）如果没有再遇到新的yield语句，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。
（4）如果该函数没有return语句，则返回的对象的value属性值为undefined。
yield语句与return语句既有相似之处，也有区别。
相似之处在于，都能返回紧跟在语句后面的那个表达式的值。
区别在于每次遇到yield，函数暂停执行，下一次再从该位置继续向后执行，而return语句不具备位置记忆的功能。一个函数里面，只能执行一次（或者说一个）return语句，但是可以执行多次（或者说多个）yield语句。正常函数只能返回一个值，因为只能执行一次return；Generator函数可以返回一系列的值，因为可以有任意多个yield。从另一个角度看，也可以说Generator生成了一系列的值，这也就是它的名称的来历（在英语中，generator这个词是“生成器”的意思）。
注意：yield语句只能用于function_的作用域，如果function_的内部还定义了其他的普通函数，则函数内部不允许使用yield语句。
注意：yield语句如果参与运算，必须用括号括起来。
1console.log(3 + yield 4); // 语法错误
2console.log(3 + (yield 4)); // 打印7next方法可以有参数
一句话说，next方法参数的作用，是为上一个yield语句赋值。由于yield永远返回undefined，这时候，如果有了next方法的参数，yield就被赋了值，比如下例，原本a变量的值是0，但是有了next的参数，a变量现在等于next的参数，也就是11。
next方法的参数每次覆盖的一定是undefined。next在没有参数的时候，函数体里面写let xx = yield oo;是没意义的，因为xx一定是undefined。
1function* g() {
2 var o = 1;
3 var a = yield o++;
4 console.log('a = ' + a);
5 var b = yield o++;
6}
7var gen = g();
8
9console.log(gen.next());
10console.log('------');
11console.log(gen.next(11));得到：
首先说，console.log(gen.next());的作用就是输出了{value: 1, done: false}，注意var a = yield o++;，由于赋值运算是先计算等号右边，然后赋值给左边，所以目前阶段，只运算了yield o++，并没有赋值。
然后说，console.log(gen.next(11));的作用，首先是执行gen.next(11)，得到什么？首先：把第一个yield o++重置为11，然后，赋值给a，再然后，console.log(‘a = ’ + a);，打印a = 11，继续然后，yield o++，得到2，最后打印出来。
从这我们看出了端倪：带参数跟不带参数的区别是，带参数的情况，首先第一步就是将上一个yield语句重置为参数值，然后再照常执行剩下的语句。总之，区别就是先有一步先重置值，接下来其他全都一样。
这个功能有很重要的语法意义，通过next方法的参数，就有办法在Generator函数开始运行之后，继续向函数体内部注入值。也就是说，可以在Generator函数运行的不同阶段，从外部向内部注入不同的值，从而调整函数行为。
提问：第一个.next()可以有参数么？
答：设这样的参数没任何意义，因为第一个.next()的前面没有yield语句。
for…of循环
for…of循环可以自动遍历Generator函数时生成的Iterator对象，且此时不再需要调用next方法。for…of循环的基本语法是：
1for (let v of foo()) {
2 console.log(v);
3}其中foo()是迭代器对象，可以把它赋值给变量，然后遍历这个变量。
1function* foo() {
2 yield 1;
3 yield 2;
4 yield 3;
5 yield 4;
6 yield 5;
7 return 6;
8}
9
10let a = foo();
11
12for (let v of a) {
13 console.log(v);
14}
15// 1 2 3 4 5上面代码使用for…of循环，依次显示5个yield语句的值。这里需要注意，一旦next方法的返回对象的done属性为true，for…of循环就会中止，且不包含该返回对象，所以上面代码的return语句返回的6，不包括在for…of循环之中。
下面是一个利用Generator函数和for…of循环，实现斐波那契数列的例子。
斐波那契数列是什么？它指的是这样一个数列 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144…
这个数列前两项是0和1，从第3项开始，每一项都等于前两项之和。
1function* fibonacci() {
2 let [prev, curr] = [0, 1];
3 for (;;) { // 这里请思考：为什么这个循环不设定结束条件？
4 [prev, curr] = [curr, prev + curr];
5 yield curr;
6 }
7}
8
9for (let n of fibonacci()) {
10 if (n > 1000) {
11 break;
12 }
13 console.log(n);
14}2.手写generator核心原理
我们从一个简单的例子开始，一步步探究Generator的实现原理：
1function* foo() {
2 yield 'result1'
3 yield 'result2'
4 yield 'result3'
5}
6
7const gen = foo()
8console.log(gen.next()) //{value: "result1", done: false}
9console.log(gen.next()) //{value: "result2", done: false}
10console.log(gen.next()) //{value: "result3", done: false}
11console.log(gen.next()) //{value: undefined, done: true}看到这种整齐的结构，我想起了switch case，也是这么地整齐，所以这两种之间应该存在一种关系。
我们尝试写一个用switch/case来实现下：
1function gen$(nextStep) {
2 while (1) {
3 switch (nextStep) {
4 case 0:
5 return 'result1';
6 case 2:
7 return 'result2';
8 case 4:
9 return 'result3';
10 case 6:
11 return undefined;
12 }
13 }
14}如代码所示，我们每次调用gen$然后传对应的参数，就能返回对应的值（也就是原本函数yield后面的值）
但是nextStep应该是一个自动增加的函数，应该不是我们传进去的。所以这里应该用一个闭包来实现
1function gen$() {
2 var nextStep = 0
3 return function () {
4 while (1) {
5 switch (nextStep) {
6 case 0:
7 nextStep = 2;
8 return 'result1';
9
10 case 2:
11 nextStep = 4;
12 return 'result2';
13
14 case 4:
15 nextStep = 6;
16 return 'result3';
17
18 case 6:
19 return undefined
20 }
21 }
22 }
23} 现在我们可以通过
获得内函数。
这样每次执行
nextStep就会改成下一次执行a()应该对应的值，并且返回相应的result了。
但是generator的底层原理不是用闭包的。而是用一个全局变量，因为这样为了后面的实现方便很多，为了遵循原理，我们改成用全局变量来实现。
先定义一个全局变量
1context = {
2 prev:0,
3 next:0
4} 1function gen$(context) {
2 while (1) {
3 switch (context.prev = context.next) {
4 case 0:
5 context.next = 2;
6 return 'result1';
7
8 case 2:
9 context.next = 4;
10 return 'result2';
11
12 case 4:
13 context.next = 6;
14 return 'result3';
15
16 case 6:
17 return undefined
18 }
19 }
20}第一次执行gen$(context),swtich判断的时候，是用prev来判断这一次应该执行那个case，执行case时再改变next的值，next表示下次应该执行哪个case。第二次执行gen$(context)的时候，将next的值赋给prev。
但是直接返回这么一个值是不对的。我们看前面的例子是返回一个对象。那该怎么实现呢？
再把例子搬下来：
1function* foo() {
2 yield 'result1'
3 yield 'result2'
4 yield 'result3'
5}
6
7const gen = foo()
8console.log(gen.next()) //{value: "result1", done: false}
9console.log(gen.next()) //{value: "result2", done: false}
10console.log(gen.next()) //{value: "result3", done: false}
11console.log(gen.next()) //{value: undefined, done: true}我们发现 gen 有next这个方法。所以可以判断出 执行foo返回的应该是一个对象，这个对象有next这个方法。所以我们初步实现foo的转化后的函数。
1let foo = function () {
2 return {
3 next: function () {
4
5 }
6 }
7}而每次执行next，就会返回拥有value和done的对象，
所以，可以完善返回值
1let foo = function () {
2 return {
3 next: function () {
4 return {
5 value,
6 done
7 }
8 }
9 }
10}但是我们这里还没定义这value和done啊，该怎么定义呢？
我们先看value的实现。我们在上面实现gen$的时候，就发现它返回的是value了。所以可以在这里获取$gen\的返回值作为value。
1 let foo = function () {
2 return {
3 next: function () {
4 value = gen$(context)
5 return {
6 value,
7 done
8 }
9 }
10 }
11 }那done怎么定义呢？
其实done作为一个全局状态表示generator是否执行结束，因此，我们可以在
context里定义，默认值为false。
1var context = {
2 next:0,
3 prev: 0,
4 done: false,
5
6}所以，每次返回，直接返回context.done就可以了
1let foo = function () {
2 return {
3 next: function () {
4 value = gen$(context);
5 done = context.done
6 return {
7 value,
8 done
9 }
10 }
11 }
12}那done是怎么改变为true的。我们知道，generator执行到后面，就会返回done:true。我们可以看例子的第四个执行结果
1function* foo() {
2 yield 'result1'
3 yield 'result2'
4 yield 'result3'
5}
6
7const gen = foo()
8console.log(gen.next()) //{value: "result1", done: false}
9console.log(gen.next()) //{value: "result2", done: false}
10console.log(gen.next()) //{value: "result3", done: false}
11console.log(gen.next()) //{value: undefined, done: true}因此，我们需要在最后一次执行gen$的时候改变context.done的值。
思路，给context添加一个stop方法。用来改变自身的done为true。在执行$gen的时时候让context执行stop就好
1var context = {
2 next:0,
3 prev: 0,
4 done: false,
5 新增代码
6 stop: function stop () {
7 this.done = true
8 }
9} 1function gen$(context) {
2 while (1) {
3 switch (context.prev = context.next) {
4 case 0:
5 context.next = 2;
6 return 'result1';
7
8 case 2:
9 context.next = 4;
10 return 'result2';
11
12 case 4:
13 context.next = 6;
14 return 'result3';
15
16 case 6:
17 新增代码
18 context.stop();
19 return undefined
20 }
21 }
22} 1let foo = function () {
2 return {
3 next: function () {
4 value = gen$(context);
5 done = context.done
6 return {
7 value,
8 done
9 }
10 }
11 }
12}这样执行到case为6的时候就会改变done的值了。
实际上这就是generator的大致原理
并不难理解，我们分析一下流程：
我们定义的function*生成器函数被转化为以上代码
转化后的代码分为三大块：
gen$(_context)由yield分割生成器函数代码而来
context对象用于储存函数执行上下文
迭代器法定义next()，用于执行gen$(_context)来跳到下一步
从中我们可以看出，「Generator实现的核心在于上下文的保存，函数并没有真的被挂起，每一次yield，其实都执行了一遍传入的生成器函数，只是在这个过程中间用了一个context对象储存上下文，使得每次执行生成器函数的时候，都可以从上一个执行结果开始执行，看起来就像函数被挂起了一样」
3.参照源码实现Context类
不过，我们这里的context是个全局对象啊？我们都知道如果是下面这种情况：
1function* g() {
2 var o = 1;
3 yield o++;
4 yield o++;
5 yield o++;
6
7}
8var gen = g();
9
10console.log(gen.next()); // 1
11
12var xxx = g();
13
14console.log(gen.next()); // 2
15console.log(xxx.next()); // 1
16console.log(gen.next()); // 3我们发现 每个迭代器之间互不干扰，作用域独立。
也就是说每个迭代器的context是独立的。但是与我们目前实现的一个全局context不一致，这个我是百思不得其解，所以看下源码。
利用babel将下面代码转化一下
1function* foo() {
2 yield 'result1'
3 yield 'result2'
4 yield 'result3'
5}我们可以在babel官网上在线转化这段代码，看看ES5环境下是如何实现Generator的：
1"use strict";
2
3var _marked =
4/*#__PURE__*/
5regeneratorRuntime.mark(foo);
6
7function foo() {
8 return regeneratorRuntime.wrap(function foo$(_context) {
9 while (1) {
10 switch (_context.prev = _context.next) {
11 case 0:
12 _context.next = 2;
13 return 'result1';
14
15 case 2:
16 _context.next = 4;
17 return 'result2';
18
19 case 4:
20 _context.next = 6;
21 return 'result3';
22
23 case 6:
24 case "end":
25 return _context.stop();
26 }
27 }
28 }, _marked);
29}看源码，你可能觉得跟我们实现的有点不一样，实际上结构是基本一样的，基本都是分成那三部分
发现源码是将我们的gen$(context)方法传入了wrap中。
我们看下wrap方法
1function wrap(innerFn, outerFn, self) {
2 var generator = Object.create(outerFn.prototype);
3 var context = new Context([]);
4 generator._invoke = makeInvokeMethod(innerFn, self, context);
5
6 return generator;
7}发现它是每生foo()执行一次 ，就会执行一次wrap方法，而在wrap方法里就会new 一个Context对象。这就说明了每个迭代器的context是独立的。
Soga~原来如此~~~~
也就是说如果我们要实现独立context还是 把context改成一个类。
在执行var gen = g();的时候再生成context实例即可：
1class Context {
2 constructor() {
3 this.next = 0
4 this.prev = 0
5 this.done = false
6 }
7 top() {
8 this.done = true
9 }
10} 1let foo = function () {
2 var context = new Context() 新增代码
3 return {
4 next: function () {
5 value = gen$(context);
6 done = context.done
7 return {
8 value,
9 done
10 }
11 }
12 }
13}4.参照源码实现参数值的保存
好了，这个独立context问题解决。但是发现哈有一个问题：
1function* foo() {
2 var a = yield 'result1'
3 console.log(a);
4 yield 'result2'
5 yield 'result3'
6}
7
8const gen = foo()
9console.log(gen.next().value)
10console.log(gen.next(222).value)
11console.log(gen.next().value)我们发现这里用var a 来接收传入的参数。
当我们第一次执行gen.next()，foo内部会执行到yield这里。还没给a赋值
当我们第二次执行gen.next()，foo内部会再第一个yield这里执行。把传入的参数222赋值给a
。
那原理是怎么实现的呢？我依旧百思不得其解，不得不再看下源码。
将下面代码babel一下
1function* foo() {
2 var a = yield 'result1'
3 console.log(a);
4 yield 'result2'
5 yield 'result3'
6 } 1"use strict";
2
3var _marked = /*#__PURE__*/regeneratorRuntime.mark(foo);
4
5function foo() {
6 var a; 在这里定义
7 return regeneratorRuntime.wrap(function foo$(_context) {
8 while (1) {
9 switch (_context.prev = _context.next) {
10 case 0:
11 _context.next = 2;
12 return 'result1';
13
14 case 2:
15 a = _context.sent; 在这里赋值
16 console.log(a);
17 _context.next = 6;
18 return 'result2';
19
20 case 6:
21 _context.next = 8;
22 return 'result3';
23
24 case 8:
25 case "end":
26 return _context.stop();
27 }
28 }
29 }, _marked);
30}
可见。是将我们在generator定义的变量提到foo函数顶部了。作为一个闭包的变量。
因此，居于这个思路，我们可以完善一下我们的代码。
如果我们在nenerator定义了xxx这个变量，那么就会被提升到函数顶部
1function gen$(context) {
2 var xxx；新增代码
3 while (1) {
4 switch (context.prev = context.next) {
5 case 0:
6 context.next = 2;
7 return 'result1';
8
9 case 2:
10
11 context.next = 4;
12 return 'result2';
13
14 case 4:
15 context.next = 6;
16 return 'result3';
17
18 case 6:
19
20 context.stop();
21 return undefined
22 }
23 }
24}如果我们将出传入的参数赋值给这个变量
那么
参数就会作为Context的参数。将传入的参数保存到context中。
1let foo = function () {
2 var context = new Context(222) //修改代码
3 return {
4 next: function () {
5 value = gen$(context);
6 done = context.done
7 return {
8 value,
9 done
10 }
11 }
12 }
13}然后在gen$()执行的时候再赋值给变量
1function gen$(context) {
2 var xxx；
3 while (1) {
4 switch (context.prev = context.next) {
5 case 0:
6 context.next = 2;
7 return 'result1';
8
9 case 2:
10 xxx = context._send 新增代码
11 context.next = 4;
12 return 'result2';
13
14 case 4:
15 context.next = 6;
16 return 'result3';
17
18 case 6:
19
20 context.stop();
21 return undefined
22 }
23 }
24}