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. golang学习笔记 ---rand

    在Golang中,有两个包提供了rand,分别为 "math/rand" 和 "crypto/rand",  对应两种应用场景. "math/rand ...

  2. Prometheus监控学习笔记之prometheus 版本1.7 常用启动参数

    日志类: -log.level 可选值 [debug, info, warn, error, fatal]  例:-log.level "info" -log.format  可选 ...

  3. ASP.NET Core In Process Hosting on IIS with ASP.NET Core 2.2(转载)

    ASP.NET Core 2.2 has been out for a while now and with it come some significant improvements to the ...

  4. asp.net webapi 随笔

    第一次写博客,文笔有限,记录下学习的过程 话不多说,直接开干 首先用vs2017建立一个空网站项目,然后只勾选api 项目建立后,如下结构 其中WebApiConfig类配置了路由相关信息 publi ...

  5. Linux纯小白操作(以安装JDK为例)

    [本文只针对纯小白,有基础的请略过] 最近公司给分配工作使用的虚拟机都是Linux系统的,以前完全没接触过,今天按照网上一些教程操作,好多地方感觉对小白不够友好(有些问题非常小白那些教程没有写出来.我 ...

  6. 02、JDBC查询

    ① 向数据库发送SQL查询语句 首先使用Statement声明一个SQL语句对象,然后让已创建的连接对象con调用方法createStatement()创建SQL语句对象. Statement sql ...

  7. Mac切换root用户

    sudo su 然后输入密码,用户名显示sh-3.2#,这里的#代表的含义就是具有root权限 这时,再输入 su - 就可以进入root用户 那接下来,如果我们要切换至普通用户该怎么做? su - ...

  8. android 实时获取网速

    public class NetSpeed { private static final String TAG = NetSpeed.class.getSimpleName(); private lo ...

  9. Linux从入门到放弃、零基础入门Linux(第三篇):在虚拟机vmware中安装linux(二)超详细手把手教你安装centos6分步图解

    一.继续在vmware中安装centos6.9 本次安装是进行最小化安装,即没有图形化界面的安装,如果是新手,建议安装带图形化界面的centos, 具体参考Linux从入门到放弃.零基础入门Linux ...

  10. MySQL的rpm安装教程

    Linux 上安装 MySQL Linux平台上推荐使用RPM包来安装Mysql,MySQL AB提供了以下RPM包的下载地址: MySQL - MySQL服务器.你需要该选项,除非你只想连接运行在另 ...