文档章节

ES6中Generator理解

德胜
 德胜
发布于 2015/11/26 16:01
字数 849
阅读 395
收藏 0

1. 生成器函数声明

   function*  name(args){};



2. yield使用

function* hello(){
    console.log('before hello');  //可看到hello()并不会立刻执行函数, 到第一次next调用时才会
    var name = yield 'please input your name';  //将字符串传递给第一次next的结果, 并等待接收第二次next传过来的数据.
    yield 'hello : ' + name;  //返回结果给外部的next
    console.log('after hello');
}

var helloer = hello();  //返回生成器实例
console.log(helloer.next());  //开始执行函数, 碰到第一个yield时返回
console.log(helloer.next('haogrgr'));  //接着第一个yield开始执行, 知道第二个yield, 这里通过next传递了参数.
console.log(helloer.next());  //继续执行console.log('after hello');, 并返回done:true, 表示执行完了.

//输出
before hello
Object {value: "please input your name", done: false}   //第一次next调用输出到这里
Object {value: "hello : haogrgr", done: false}                  //第二次next调用输出到这里
after hello                                                                          
Object {value: undefined, done: true}                             //第三次next调用输出到这里


   真实的执行顺序大概为:

1)创建generator实例.

2)第一次调用next方法, 开始执行函数体
第一次 next{
    console.log('before hello');
    return  'please input your name';  //碰到yield, 返回yield后面的值
}

3)next调用返回.  

4)console输出next的返回值  Object {value: "please input your name", done: false}

5)第二次调用next方法, 并传入参数  'haogrgr'.
第二次next{
    var name = 'haogrgr'; //haogrgr通过 next('haogrgr')传过来
    return  'hello : ' + name;  //碰到yield, 返回
}

6)console输出next的返回值  Object {value: "hello : haogrgr", done: false} 

7)第三次调用next
第三次next{
    console.log('after hello');
}

8)console输出next的返回值  Object {value: undefined, done: true}



3. 总结

   1)申明生成器函数使用  function* 开头.

   2)调用生成器函数生成新的生成器实例.

   3)第一次调用生成器next方法, 会开始执行函数, 直到碰到yield关键字.

   4)yield关键字后面可以返回一个值给next调用.

   5)同时, next方法可以有参数, 参数的值会作为   (yield exp)   的值.

   6)yield和next可以看作是通过消息交流的两个组件,  比如 (yield msg) 传递一个消息给next, 然后暂停, 等待下个一个next调用传递一个值作为(yield msg)的返回值.

   7)生成器函数中, return的值, 会作为最后一次next调用的返回值的value属性.

   8)异常可以通过helloer.throw(err)来抛出.



4. 一种实现方式

   1)转义, 比如facebook出的工具regenerator,   对于上面的例子, 会转换为如下的代码.

var marked0$0 = [hello].map(regeneratorRuntime.mark);
function hello() {
    var name;

    return regeneratorRuntime.wrap(function hello$(context$1$0) {
        while (1) switch (context$1$0.prev = context$1$0.next) {
        case 0:
            console.log('before hello');
            context$1$0.next = 3;
            return 'please input your name';
        case 3:
            name = context$1$0.sent;
            context$1$0.next = 6;
            return 'hello : ' + name;
        case 6:
            console.log('after hello');
        case 7:
        case "end":
            return context$1$0.stop();
        }
    }, marked0$0[0], this);
}

var helloer = hello();
console.log(helloer.next());
console.log(helloer.next('haogrgr'));
console.log(helloer.next());


   可以看到, 通过语法转换, 然后加上一个运行时, 成功了实现了生成器的功能.

   通过将函数逻辑分割, 然后再上下文中记录当前的步骤, 来达到控制的转移(原本一路执行到底的函数变成了, 一节一节的跳来跳去的执行).



5. 参考资料

http://www.html5rocks.com/zh/tutorials/es6/promises/

http://www.infoq.com/cn/articles/es6-in-depth-generators

http://www.infoq.com/cn/articles/es6-in-depth-generators-continued

https://facebook.github.io/regenerator/

http://www.zhihu.com/question/30820791

http://swannodette.github.io/2013/08/24/es6-generators-and-csp/

http://swannodette.github.io/2013/07/31/extracting-processes/

http://www.zhihu.com/question/30820791

   


© 著作权归作者所有

共有 人打赏支持
德胜
粉丝 56
博文 31
码字总数 41512
作品 0
长沙
私信 提问
ES6 系列之 Babel 将 Generator 编译成了什么样子

前言 本文就是简单介绍下 Generator 语法编译后的代码。 Generator 我们打印下执行的结果: Babel 具体的执行过程就不说了,我们直接在 Babel 官网的 Try it out 粘贴上述代码,然后查看代码...

冴羽
10/30
0
0
ES6 系列之 Babel 将 Async 编译成了什么样子

前言 本文就是简单介绍下 Async 语法编译后的代码。 Async Babel 我们直接在 Babel 官网的 Try it out 粘贴上述代码,然后查看代码编译成什么样子: _asyncToGenerator regeneratorRuntime 相...

冴羽
10/31
0
0
ES6-7

JavaScript Promise 迷你书(中文版) 超详细介绍promise的gitbook,看完再不会promise...... 本书的目的是以目前还在制定中的ECMAScript 6 Promises规范为中心,着重向各位读者介绍JavaScr...

掘金官方
01/05
0
0
Generator:同步代码书写异步情怀

编者按:看完本文,你能对ES6的Generator有一个很好的理解,轻松地以同步的方式写异步代码,也能初步理解到TJ大神的co框架的原理。 前言:ES6在2015年6月正式发布,它带给js带来许多新特性,...

有赞前端
2017/08/21
0
0
ES6 系列之我们来聊聊 Async

async ES2017 标准引入了 async 函数,使得异步操作变得更加方便。 在异步处理上,async 函数就是 Generator 函数的语法糖。 举个例子: 当你使用 async 时: 其实 async 函数的实现原理,就...

冴羽
10/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 眼看着这颗陨石砸了下来

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子:分享Nachtblut的单曲《Antik》 《Antik》- Nachtblut 手机党少年们想听歌,请使劲儿戳(这里) @mr_chip :上海的初雪之后有点冷 ...

小小编辑
24分钟前
35
6
Confluence 6 修改导航显示选项

选择 子页面(Child pages)来在边栏中查看当前页面的子页面。 选择 页面树(Page tree)来查看整个空间的页面树,扩展当前的页面。 你也可以选择是否完全隐藏导航显示选项或者添加你希望可见...

honeymose
55分钟前
0
0
Ubuntu18.04 安装MySQL

1.安装MySQL sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 3.设置MySQL非root用户 设置原因:配置过程为系统root权限,在构建MySQL连接时出现错误:ERROR...

AI_SKI
今天
3
0
3.6 rc脚本(start方法) 3.7 rc脚本(stop和status方法) 3.8 rc脚本(以daemon方式启动)

3.6-3.7 rc脚本(start、stop和status方法) #!/usr/bin/env python# -*- coding: utf-8 -*-# [@Version](https://my.oschina.net/u/931210) : python 2.7# [@Time](https://my.oschina.......

隐匿的蚂蚁
今天
3
0
Cnn学习相关博客

CNN卷积神经网络原理讲解+图片识别应用(附源码) 笨方法学习CNN图像识别系列 深度学习图像识别项目(中):Keras和卷积神经网络(CNN) 卷积神经网络模型部署到移动设备 使用CNN神经网络进行...

-九天-
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部