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 相关文章推荐
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
JS函数进阶之继承用法实例分析
Jan 15 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 intval的测试代码发现问题
2008/07/27 PHP
黑夜路人出的几道php笔试题
2009/08/04 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
永不消失的title提示代码
2007/02/15 Javascript
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
由浅入深讲解python中的yield与generator
2017/04/05 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
Python 获取项目根路径的代码
2019/09/27 Python
python 实现绘制整齐的表格
2019/11/18 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
python与js主要区别点总结
2020/09/13 Python
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
工厂厂长岗位职责
2013/11/08 职场文书
英文简历中的自我评价用语
2013/12/09 职场文书
母婴店促销方案
2014/03/05 职场文书
实验室标语
2014/06/21 职场文书
政工师工作总结2015
2015/05/26 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python