上一篇我们学习完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