上一篇我们学习完Promise之后，本篇我们来学习generator函数。
generator是ES6引入的一个新的函数，动词“generate”的意思是“生成”，那么名词“generator”的意思就是“生成器”。
它是用来干什么的呢？通过其字面意思我们应该可以猜到，它是可以生成很多东西的函数，是这样吗？
一、generator函数介绍和使用
generator函数在ES6中和其他函数的最大不同就是，普通的函数一旦调用后就会执行到底，而generator函数可以控制在中间停止运行，等待新指令放行后继续运行，具有“挂起”的一个效果。
我们来通过一个实例了解一下generator函数的功能。
这里我们定义了一个show方法，分别弹出弹框a和弹框b：
<script type="text/javascript">
function show(){
alert('a');
alert('b');
}
show();
</script>当我们执行这个方法时，就会分别在网页上弹出a和b。如果我们想实现弹出a后，过一会再弹出b，又不用定时的方法，此时就需要用到generator函数了。
generator函数与普通函数的区别就是函数名称前面有“*”号（或者function跟*号，或者谁都不跟放在function和函数名中间，用空格空开），然后通过yield关键字，把函数的执行流挂起：
function *show(){
alert('a');
yield;
alert('b');
}这里的“yield”翻译过来就是“放弃、退让”的意思，其起到的作用也是暂时放弃函数的执行，让位给其他线程，与Java中多线程的yield含义几乎一样。
创建generator函数后，不能像调用其他普通函数一样直接写函数名称加括号，而是需要创建一个generator对象：
let genObj = show();
alert(genObj);我们打印一下该对象，可以看出确实是一个generator对象：
我们打开浏览器的开发者选项，看看generator对象中包含了哪些方法：
我们可以注意到next方法，它的作用就是执行generator函数的下一个阶段。
我们回到刚才的函数，当我们执行一个next的时候，会执行第一个yield关键字之前的内容：
<script type="text/javascript">
function *show(){
alert('a');
yield;
alert('b');
}
let genObj = show();
genObj.next();
</script>效果：
可以看到输出了a之后就没有响应了。紧接着我们再执行一个next：
<script type="text/javascript">
function *show(){
alert('a');
yield;
alert('b');
}
let genObj = show();
genObj.next();
genObj.next();
</script>可以看到a和b的弹窗都出现了。
看完上面的函数，可以发现其实generator很好理解，实际上generator函数我们就可以理解为“踹一脚走一步”的函数，generator的特点就是“走走停停”。
二、generator函数的应用场景
generator特别适合以下场景：
一个主函数，执行到一半，需要请求一个花时间获取的数据之后，才能进行下一步的内容，此时我们就需要叫停函数，去拿那个数据，确定那个数据拿到之后，再解除叫停，继续执行下一步的内容。下面的伪代码就可以说明这个场景：
//原来老的写法
function 函数(){
代码...
ajax(xxx, function(){
代码...（获取关键数据）
获取数据后执行的逻辑...
});
}
//使用generator函数的写法
function *函数(){
代码...
yield ajax(xxx 获取关键数据);
获取数据后执行的逻辑...
}通过上面的伪代码我们可以看到，使用generator函数可以避免去进行嵌套回调获取数据，我们可以像顺序执行一样，在没有获取到数据之前，先暂停函数，获取数据后再执行函数。
具体的实例我们再后续篇章中具体去写。
三、generator函数的原理
generator函数是如何做到可以暂停的呢？这里就要回归到刚才generator函数中文翻译“生成器”的本质了。实际上，generator函数它会按照我们yield的位置，将整个函数逻辑切分开来，生成许多小的函数，按照从上到下的顺序执行。例如上面我们执行的这个函数：
<script type="text/javascript">
function *show(){
alert('a');
yield;
alert('b');
}
</script>实际上在后台它自己生成了两个小函数：
<script type="text/javascript">
function show_1(){
alert('a');
}
function show_2(){
alert('b');
}
</script>然后我们执行第一个next的时候，走的是show_1()方法，第二次next的时候走的是show_2()方法。
以上就是generator的基础内容，下一篇我们继续讲解有关generator中关键字yield的内容。
参考：深入解读ES6系列视频教程（kaikeba.com提供，主讲老师石川（Blue））
转载请注明出处：https://blog.csdn.net/acmman/article/details/115823505