写点什么

JavaScript 进阶(八)generator(生成器)实现

用户头像
Augus
关注
发布于: 6 小时前
JavaScript进阶(八)generator(生成器)实现

写在前面,generator 对于写 react 的同学相信是相对熟悉一点。react 的中间件,react-saga 就充分用到的这个 数据类型。废话少说,Let's go!

Generator 实现

generator(生成器)是 ES6 标准引入的新的数据类型。generator 看上去就像是平常用到的函数,它可以返回多次,和 Promise ⼀样,也可以⽤来异步编程。其借鉴了 Python 的 generator 的概念和语法。当然你了解 Python 的 generator,相信这个对你来说肯定是相当简单。


//  * 表示这是⼀个 Generator 函数
// 通过 yield 暂停代码
// 调⽤ next 恢复执⾏
function* test() {
let add = 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 函数的时候,运行 yield 前面的代码,输出 yield 后面的结果,然后暂停的代码,再调用,在暂停,最后执行完所有的 yield 结束。以下是 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(); } } });}
复制代码


好,今天就到这里了,明天见。我是 Augus,一个爱瞎搞的软件开发工程师。END~~~

用户头像

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

评论

发布
暂无评论
JavaScript进阶(八)generator(生成器)实现