JS用状态机的思想看Generator之基础语法篇

近来进修了阮一峰先生的《ECMAScript 6 入门》里的Generator相干学问，以及《你不晓得的JS》中卷的异步编程部份。同时在SegmentFault问答区看到了一些前端朋侪对Generator的语法和实行历程有一些疑问，因而我想分享一下本身对Generator的明白，或许对前端社区会有所协助。

Generator的实质是一个状况机，yield关键字的作用是支解两个状况，右侧的语句实行在前一个状况，而左边的语句是下一个状况要实行的。假如右侧为空则默以为undefined，左边为空默以为一个赋值语句，被赋值的变量永久不会被挪用。当挪用Generator函数猎取一个迭代器时，状况机处于初态。迭代器挪用next要领后，向下一个状况跳转，然后实行该状况的代码。当碰到return或末了一个yield时，进入终态。终态的标识就是next要领返回对象的done属性。

Generator函数实行后会生出一个迭代器，包括3个重要要领：next、throw和return。它们的实质都是转变状况机的状况，但throw和return属于强迫转变，next则是依据定义好的流程去转变。下面我来离别讲讲这三种要领。

next要领

先看下面这个例子：

function* gen(){
console.log("state1");
let state1 = yield "state1";
console.log("state2");
let state2 = yield "state2";
console.log("end");
}

我们声清楚明了一个名为gen的Generator函数，其中有2个yield语句，我们可以归结出4个状况：

1. 初态：这个状况是gen这个“状况机”的初始状况，什么也不会做；

2. 状况一：初态的下一个状况，跳转到这个状况后实行

   console.log("state1");
yield "state1";

3. 状况二：这个状况会先吸收上一个状况传来的数据data，然后实行

   let state1 = data;
console.log("state2");
yield "state2";//注重，这里是末了一个yield

   这里的data是对上一个状况中yield "state1"的替代。

4. 状况三（终态）：因为gen已实行过末了一个yield表达式，所以状况三也就是状况机的终态。这个状况也接受了上一个状况传来的数据data，实行了

   let state2 = data;
console.log("end");

   同时，还将迭代器返回的对象done属性修正成true，比方{value:undefined,done:true}。这代表gen这个状况机已实行到了终态。

将gen这个Generator函数转换成状况机今后，我们可以在脑中设想出下面这张图：

接下来我们就依据这张图剖析下状况间是怎样跳转的。

起首是初态，当Generator函数被实行后，状况机就自动处于初态了。这个状况并不会实行任何语句。
也就是实行语句：

let g = gen();

会有一个箭头指向初态，以下图：

然后黑白初态间的状况跳转。假如你想要依据gen里定义好的状况递次跳转，那你应当运用next()要领。比方我们第一次实行g.next()，gen这个状况时机从初态跳转到状况一。然后再实行g.next()，则状况一会向状况二跳转，而且发送数据undefined，这是因为next函数没有传参，默以为undefined。关于状况间怎样通报数据我将在下一节讲。

当我们不停挪用next要领，gen会依据定义好的流程举行状况跳转。而且即使是到了终态，next也会返回对象，只是这个对象的值一直是{value:undefined,done:true}。听上去像是在终态背面又新增了一个状况，所以next要领可以不停实行。然则我以为为了相符状况机的设定，照样将第一个done为true的状况叫做终态比较好。

return要领

与循序渐进的next要领差别，return要领会突破原有的状况序列，并依据开发者的须要跳转到一个新的状况，而这个状况有两个特征：

1. 不是原有状况序列中的任何一个状况；
2. 该状况返回的对象的done属性值为true。

我们继承用上面的例子。假如从状况一跳转到状况二，运用的代码是g.return();而不是g.next()，那末状况图会变成下面这个模样：

从图中可以看出，return的行动就是新增一个新·状况二插进去在状况一背面，然后从状况一跳转到新·状况二，同时输出{value:undefined,done:true}。一样，这里的undefined也是因为return要领没有传参。

假如Generator函数里有一个try&＃8230;finally语句，return新建的状况会插进去在实行finally块末了一行语句的状况以后。可以看看这一节阮一峰先生举的例子。

throw要领

我喜好将throw要领看成next和return要领的连系。throw()要领与throw关键字很像，都是抛出一个毛病。而Generator函数会依据是不是定义捕捉语句来举行状况跳转。一共有下面3种状况：

1. 没有try&＃8230;catch；
2. 下一个状况要实行的语句在try&＃8230;catch中；
3. throw()要领在一个try&＃8230;catch中被挪用。

没有try&＃8230;catch

继承运用上一章的代码，假定从状况一到状况二运用的是g.throw()。

function* gen(){
console.log("state1");
let state1 = yield "state1";
console.log("state2");
let state2 = yield "state2";
console.log("end");
}
let g = gen();
g.next();
g.throw();

起首，状况二的代码console.log("state2");...并不在try&＃8230;catch块中，而且也不是在try&＃8230;catch块中挪用g.throw()。那末末了的状况图应当是下面如许：

看上去就像是挪用了return要领，新增一个状况，同时将输出的对象done属性设置为true。然则有一点差别的是这个对象并不会输出，而是报错：Uncaught undefined，因为顺序因毛病而中缀。一样，底本要输出的字符串state2也不会输出。

这里我以为须要注重的一个题目是毛病是在状况二中的哪一条语句抛出的？修正了代码位置后，我发明throw()要领是将yield "state1"替代成throw undefined，所以以后的let state1...等语句都不会实行。

下一个状况在try&＃8230;catch中

修正上一章的示例代码：

function* gen(){
console.log("state1");
try{
let state1 = yield "state1";
console.log("state2");
}catch(e){
console.log("catch it");
}
let state2 = yield "state2";
console.log("end");
}
let g = gen();
g.next();
g.throw();

因为状况二要实行的代码被try&＃8230;catch包裹，所以throw()抛出的毛病被catch块捕捉，从而顺序直接转入catch块实行语句，打印“catch it”。这与JS的毛病捕捉机制一致，状况图整体并不会变化，只是状况二节点下的实行语句有变化。

注重赤色圈内的语句，相比较与挪用next要领时的状况二，删除了try块中毛病抛出位置后的let state1 = data;console.log("state2");，增加了catch块中要实行的console.log("catch it");，假如有finally块也会把内里的语句增加进去。以后再挪用next要领，仍然会依据规定好的流程举行跳转。

这一次，throw要领对状况机的操纵与next要领大致雷同。但因为他实质上是抛出毛病，所以会对顺序的代码实行递次有肯定的影响。

throw()要领在一个try&＃8230;catch中被挪用

只需连系上面2种状况，记着3个划定规矩就行：

1. Genereator内部没有try&＃8230;catch则看成平常抛出毛病处置惩罚；
2. 下一个状况在try&＃8230;catch中时，throw()要领抛出的毛病会被捕捉，那相当于外部没有捕捉毛病，与第二种状况一致。
3. 划定规矩2中毛病捕捉后的状况实行代码报错，按划定规矩1处置惩罚。

   这里，针对划定规矩3做一个解说。

看下面这个例子：

function* gen(){
console.log("state1");
try{
let state1 = yield "state1";
console.log("state2");
}catch(e){
err = a;//毛病
console.log("内部捕捉");
}
let state2 = yield "state2";
console.log("end");
}
let g = gen();
g.next();
try{
g.throw();
}catch(e){
console.log("外部捕捉");
}

那末底本相符划定规矩2的代码在捕捉throw()抛出的毛病后又因为没有声明标识符a报错，从而被外层catch块捕捉。致使看上去就像划定规矩1一样。

状况间传值

next、throw和return要领除了状况跳转外，另有一个功用就是为前后两个状况传值。然则它们3个的表现又各不雷同。

next给状况传值的表现中规中矩，看看下面的代码：

function* gen(){
let value = yield "你好";
console.log(value);
}
let g = gen();
g.next();
g.next("再会");

当我们想要跳转到实行console.log(value);的状况二时，给next要领传一个字符串“再会”，然后yield "你好"会被替代成"再会"，赋值给value变量打印出来。你可以尝尝不传值或许传其他值，应当能协助你明白更深入。

throw要领平常都邑传值，而且为了范例应当传一个Error对象。

return要领传值有点特别，修正上面的代码：

function* gen(){
let value = yield "你好";
console.log(value);
}
let g = gen();
g.next();
g.return("看得见我吗？");

假如你前面的学问没忘的话，你应当晓得，用return替代next后，什么也不会打印。因为跳转到了一个什么代码也不会实行状况。那末return函数的参数作用表现在哪呢？还记得每个要领挪用后都邑返回一个对象吗？上面的代码输出了{value:"看得见我吗",done:true}。哈，我瞥见你了。

平常我喜好把末了一个yield或是return表达式看成末了一个状况。然则有时刻可以把终态设想成一个不停轮回本身的状况，比方下面如许：

如许明白有一个优点是可以诠释为何done属性值为true后，再次挪用next仍会返回一个对象{value:undefined,done:true}。然则如许会多一个状况，绘图不方便（伪装这个来由很充足）。
总之，怎样明白全看个人喜好。

下面应用状况机的头脑讲讲两个现实案例。

一个小题目

我之前回复过一个题目，把它看成实例来剖析一下吧

题主不太明白下面代码的实行递次：

function* bar() {
console.log('one');
console.log('two');
console.log('three');
yield console.log('test');
console.log(`1. ${yield}`);
console.log(`2. ${yield}`);
return 'result';
}
let barObj = bar();
barObj.next();
barObj.next('a');
barObj.next('b');

让我们来帮他剖析剖析吧。

起首，我补全了这段代码。

function* bar() {
console.log('one');
console.log('two');
console.log('three');
yield console.log('test');
console.log(`1. ${yield}`);
console.log(`2. ${yield}`);
return 'result';
}
let barObj = bar();
barObj.next();
barObj.next('a');
barObj.next('b');
barObj.next('c');
barObj.next();

然后，剖析bar这个Genereator声清楚明了几个状况。一共有6个状况，状况图以下：

依据状况图，题主提出的两个题目：

1. 第一次 next 的时刻应当走到了 yield console.log(&＃8216;test&＃8217;)
2. 第二次传了一个 a 这个时刻顺序好像没有实行

   第一个题目，挪用next要领后，跳转到state1，而yield console.log('test')是在state1里实行的，所以确切走到了这行代码。

然后，挪用next(&＃8220;a&＃8221;)，跳转到state2，这里并没有值吸收字符串"a"，所以天然没有打印出来，形成顺序没有实行的假象。

这个题目比较简单，状况图一画就可以明白了。

throw要领的一个特征

第二个实例是我在看《ECMAScript 6 入门》时，阮一峰先生说：

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

这里我以为很新鲜，因为依据我的主意，这是明显的呀，为何要零丁说呢？依据我在Generator状况跳转那一章说的，这属于下一个状况在try&＃8230;catch中的状况，因为

try{
/*state2*/yield console.log('a');
}

中yield的左边是state2状况的代码，虽然没有写，然则我们默以为向一个永久不会被挪用的变量举行赋值。
接着是画状况图：

我们只体贴g.throw()，所以画部份状况图就够了。从图中可以看出，throw要领被挪用后，因为毛病被捕捉，所以平常跳转到了state2，然后必然会实行yield console.log('b');。

状况机的学问照样在大学的编译道理课进修的，有些观点已忘了。不过在看Generator时，我倏忽以为用状况机来诠释代码的凝结和实行异常直观。只需可以画出响应的状况图就可以晓得每一次挪用next等要领会实行什么样的代码。靠着状况机的头脑，我在进修Generator时基础没有迷惑，所以决议整顿并分享出来。
然则我有点不自信，因为网上搜刮了很屡次，除了阮一峰先生，并没有人同时提到状况机和Generator两个关键字。我在写这篇文章的时刻也偶然疑心是不是是我错了。不过既然已写了这么多，而且从我本身觉得以及处理了文中两个例子的状况来看，分享出来让人人指指错也是不错的。 所以，假如有什么题目愿望可以在批评中指出。异常感谢你的浏览，祝你新年快乐！