js中Generator函数的深入讲解


Posted in Javascript onApril 07, 2019

前言

Generator函数是es6提供的一种异步编程的解决方案,语法行为与传统函数完全不一样。

Generator函数有多种理解角度,从语法上,首先可以把它理解成,Generator函数是一个状态机,封装了多个内部状态。

行Generator函数会返回一个遍历器对象,也就是说,Generator函数除了是状态机还是一个遍历器对象生成函数。 返回遍历器对象,可以依次遍历Generator函数内部的每一个状态。

下面话不多说了,来一起看看详细的介绍吧

语法上

首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。

形式上

Generator 函数是一个普通函数,但是有两个特征。

 一是,function关键字与函数名之间有一个星号;
 二是,函数体内部使用yield表达式,定义不同的内部状态(yield在英语里的意思就是“产出”)。

调用上

Generator 函数的调用方法与普通函数一样,也是在函数名后面加上一对圆括号。不同的是,调用 Generator 函数后,该函数并不执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象,也就是上一章介绍的遍历器对象(Iterator Object)。我们必须调用遍历器对象的next方法,使得指针移向下一个状态。也就是说,每次调用next方法,内部指针就从函数头部或上一次停下来的地方开始执行,直到遇到下一个yield表达式(或return语句)为止。换言之,Generator 函数是分段执行的,yield表达式是暂停执行的标记,而next方法可以恢复执行

function* helloWorldGenerator() {
 yield 'hello';
 yield 'world';
 return 'ending';
}

var hw = helloWorldGenerator();
hw.next()
// { value: 'hello', done: false }

hw.next()
// { value: 'world', done: false }

hw.next()
// { value: 'ending', done: true }

hw.next()
// { value: undefined, done: true }

调用 Generator 函数,返回一个遍历器对象,代表 Generator 函数的内部指针。以后,每次调用遍历器对象的next方法,就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值,是yield表达式后面那个表达式的值;done属性是一个布尔值,表示是否遍历结束。

yield表达式

yield表达式与return语句既有相似之处,也有区别。相似之处在于,都能返回紧跟在语句后面的那个表达式的值。区别在于每次遇到yield,函数暂停执行,下一次再从该位置继续向后执行,而return语句不具备位置记忆的功能。一个函数里面,只能执行一次(或者说一个)return语句,但是可以执行多次(或者说多个)yield表达式。正常函数只能返回一个值,因为只能执行一次return;Generator 函数可以返回一系列的值,因为可以有任意多个yield。从另一个角度看,也可以说 Generator 生成了一系列的值,这也就是它的名称的来历(英语中,generator 这个词是“生成器”的意思)。

语法注意点:

1.yield表达式只能用在 Generator 函数里面

2.yield表达式如果用在另一个表达式之中,必须放在圆括号里面

3.yield表达式用作函数参数或放在赋值表达式的右边,可以不加括号。

例如:

function* demo() {
 foo(yield 'a', yield 'b'); // OK
 let input = yield; // OK
}

next 方法的参数

yield表达式本身没有返回值(就是说let a=yield ;会返回undefined),或者说总是返回undefined。next方法可以带一个参数,该参数就会被当作上一个yield表达式的返回值 (注意,是表达式的返回值,例如 let a=yield.......... 参数会是a 的值并且会覆盖表达式之前的值)。

function* f() {
 for(var i = 0; true; i++) {
 var reset = yield i;
 console.log(reset);
 if(reset) { i = -1; }
 }
}

var g = f();

g.next()

js中Generator函数的深入讲解

由于next方法的参数表示上一个yield表达式的返回值,所以在第一次使用next方法时,传递参数是无效的。V8 引擎直接忽略第一次使用next方法时的参数,只有从第二次使用next方法开始,参数才是有效的。从语义上讲,第一个next方法用来启动遍历器对象,所以不用带有参数。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
浅析创建javascript对象的方法
May 13 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
js实现页面图片消除效果
Mar 24 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
Element Card 卡片的具体使用
Jul 26 Javascript
javascript实现贪吃蛇小游戏
Jul 28 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 #Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 #Javascript
vue自定义指令directive的使用方法
Apr 07 #Javascript
浅谈express.js框架中间件(middleware)
Apr 07 #Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 #Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 #Javascript
javascrit中undefined和null的区别详解
Apr 07 #Javascript
You might like
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
基于JQUERY的多级联动代码
2012/01/24 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
python实现公司年会抽奖程序
2019/01/22 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
python实现双人五子棋(终端版)
2020/12/30 Python
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
女方回门宴答谢词
2014/01/14 职场文书
运动会通讯稿300字
2014/02/02 职场文书
机关保密承诺书
2014/06/03 职场文书
小学同学聚会感言
2015/07/30 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫