Generator 是 ES6 中新增的语法,和 Promise 一样,都可以用来异步编程

// 使用 * 表示这是一个 Generator 函数
// 内部可以通过 yield 暂停代码
// 通过调用 next 恢复执行
function* test() {
let a = 1 + 2;
yield 2;
yield 3;
}
let b = test();
console.log(b.next()); // > { value: 2, done: false }
console.log(b.next()); // > { value: 3, done: false }
console.log(b.next()); // > { value: undefined, done: true }

从以上代码可以发现,加上 * 的函数执行后拥有了 next 函数,也就是说函数执行后返回了一个对象。每次调用 next 函数可以继续执行被暂停的代码。以下是 Generator 函数的简单实现

// cb 也就是编译过的 test 函数
function generator(cb) {
return (function() {
var object = {
next: 0,
stop: function() {}
}; return {
next: function() {
var ret = cb(object);
if (ret === undefined) return { value: undefined, done: true };
return {
value: ret,
done: false
};
}
};
})();
}
// 如果你使用 babel 编译后可以发现 test 函数变成了这样
function test() {
var a;
return generator(function(_context) {
while (1) {
switch ((_context.prev = _context.next)) {
// 可以发现通过 yield 将代码分割成几块
// 每次执行 next 函数就执行一块代码
// 并且表明下次需要执行哪块代码
case 0:
a = 1 + 2;
_context.next = 4;
return 2;
case 4:
_context.next = 6;
return 3;
// 执行完毕
case 6:
case "end":
return _context.stop();
}
}
});
}

简单说说JavaScript的Generator 实现(ES6)的更多相关文章

  1. 最简单的JavaScript模板引擎

    在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到 ...

  2. 一个简单的javascript节流器实现

    节流器 javascript的节流器主要用于延缓某些动作的执行,比如ajax请求,如果input框注册了input事件,那么当用户输入时就会持续的触发这个事件,如果回调函数中持续的通过ajax调用后台 ...

  3. javaScript - 面向对象 - ES5 和 ES6

    javaScript - 面向对象 - ES5 和 ES6 ES5之前用 构造函数 构造函数的特点 就是一个普通函数, 他的函数名要大写.: 带方法的写法: 原型的方式: prototype 为内置的 ...

  4. 简单的JavaScript字符串加密解密

    简单的JavaScript字符串加密解密 <div> <input type="text" id="input" autofocus=&quo ...

  5. JavaScript、TypeScript、ES6三者之间的联系和区别

    ES6是什么 ECMAScript 6.0(以下简称ES6)是JavaScript语言(现在是遵循ES5标准)的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以 ...

  6. ES6 Generator vs ES6 async/await

    ES6 Generator vs ES6 async/await next yield promise refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允 ...

  7. JavaScript Learning Paths(ES5/ES6/ES-Next)

    JavaScript Learning Paths(ES5/ES6/ES-Next) JavaScript Expert refs https://developer.mozilla.org/en-U ...

  8. ES6新特性:Javascript中Generator(生成器)

    ES6的很多特性都跟Generator扯上关系,而且实际用处比较广, 包含了任何需要异步的模块, 比如ajax, filesystem, 或者数组对象遍历等都可以用到: Generator的使用: G ...

  9. 6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)

    作者:余博伦链接:https://zhuanlan.zhihu.com/p/23412169来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 和大家一样,最近我也看了Jo ...

随机推荐

  1. mysqlbinlog恢复误删数据

    概述 代码bug,在处理上传出现异常时执行了DELETE FROM t_resource WHERE resource_id = ? OR parent_id = ?因为OR条件导致用户的上传的所有数 ...

  2. Go语言(golang)新发布的1.13中的Error Wrapping深度分析

    Go 1.13发布的功能还有一个值得深入研究的,就是对Error的增强,也是今天我们要分析的 Error Wrapping. 背景 做Go语言开发的,肯定经常用error,但是我们也知道error非常 ...

  3. tkinter事件键盘绑定

    tkinter事件键盘绑定 from tkinter import * root=Tk() #创建一个框架,在这个框架中响应事件 frame=Frame(root, width=200,height= ...

  4. C++中的Mat, const Mat, Mat &,Mat &, const Mat &的区别

    Mat, copy传递,不会改变外部变量的Mat. Mat &, reference传递,函数内部修改将会改变外部. const Mat, copy传递,在函数内,不会被修改,也不会影响到外部 ...

  5. QT场景视图父子关系图元打印研究

    在之前的一篇文章中,实现了QT场景视图的打印功能,主要通过render函数来实现,非常简单和方便. 在实际的项目需求中,除了打印整个场景外,还需要对单个图形进行打印操作,基于item的图形可以在pai ...

  6. Global variable in ABAP function group

    Function group is loaded into runtime memory by the FIRST call of a function module inside this func ...

  7. python中for循环里去修改列表注意的事项

    你的微信好友当中有 5 个推销的,他们存在一个列表 # black_list=['卖茶叶', '卖面膜', '卖保险', '卖花生', '卖手机'] # 当中, 请把这 5 个人分别从 black_l ...

  8. centos7利用acme.sh获取Let's Encrypt的永久免费ssl证书并配置网站域名https访问

    acme.sh介绍:https://github.com/Neilpang/acme.sh/wiki/%E8%AF%B4%E6%98%8E github:https://github.com/Neil ...

  9. 半小时上手laya

    laya的性能挺高,跟顶级的pixi.js差一些.比egret的性能强一些 laya的代码是偏功能性的, 观赏性,可读性比很差. 第一步,github上看了下,layaair二百星不到? 想不到堂堂的 ...

  10. Python+OpenCV4:读写输入和输出的简单实践(图片、视频、摄像头)

    典型的文件处理流程如下: 利用命令行参数 sys.argv 命令行参数是读取文件时常用的方式. 命令行参数保存在 sys.argv 的列表中,列表的第一个元素是脚本名称,后面的元素是命令行参数: 通过 ...