JS魔法堂：ES6新特性——GeneratorFunction介绍

一、前言      

  第一次看koajs的示例时，发现该语句 function *(next){...............} ，这是啥啊？于是搜索一下，原来这是就是ES6的新特性Generator Function(生成器函数)。

  那什么是生成器函数呢？其实就相当于C#2.0中通过yield关键字实现的迭代器的生成器（细节有所不同），那么理解的关键就在迭代器和yield关键字两部分了。下面将尝试从表象出发，逐步对生成器函数及利用它进行异步编程进行浅层的分析理解。

 

二、表象——语法及基本使用   

  示例：

// 定义生成器函数

function *enumerable(msg){

 console.log(msg)

 var msg1 = yield msg +  after 

 console.log(msg1)

 var msg2 = yield msg1 +  after

 try{

 var msg3 = yield msg2 + after

 console.log(ok)

 catch(e){

 console.log(e)

 console.log(msg2 +  over)

// 初始化迭代器

var enumerator = enumerable(hello)

var ret = enumerator.next() // 控制台显示 hello，ret的值{value:hello after,done:false}

ret = enumerator.next(world) // 控制台显示 world，ret的值{value:world after,done:false}

ret = enumerator.next(game) // 控制台显示game，ret的值{value:game after,done:false}

// 抛出异常信息

ret = enumerator.throw(new Error(test)) // 控制台显示new Error(test)信息，然后显示game over。ret的值为{done:true}

// for...of语句

enumerator = enumerable(hello)

for(ret of enumerator)

 console.log(JSON.stringify(ret));

// 控制台依次显示

// hello

// {value:hello after,done:false}

// world

// {value:world after,done:false}

// {value:game after,done:false}

// game over

// {done:true}

 

  1. 生成器语函数定义

function* test(){}

function * test(){}

function *test(){}

test = function* (){} 

test = function *(){}

  普通函数添加*号后则成为了成为了生成器函数了。

Object.prototype.toString.call(test) // 显示[object GeneratorFunction]

  生成器函数的行为与普通函数并不相同，表现为如下3点：

  1. 通过new运算符或函数调用的形式调用生成器函数，均会返回一个生成器实例；

  2. 通过new运算符或函数调用的形式调用生成器函数，均不会马上执行函数体的代码；

  3. 必须调用生成器实例的next方法才会执行生成器函数体的代码。

function *say(msg){

 console.log(msg)

var gen = say(hello world) // 没有显示hello world

console.log(Object.prototype.toString.call(gen)) // 显示[object Generator]

gen.next() // 显示hello world

  2、 关键字yield——迭代器生成器

   用于马上退出代码块并保留现场，当执行迭代器的next函数时，则能从退出点恢复现场并继续执行下去。下面有2点需要注意：

    1. yield后面的表达式将作为迭代器next函数的返回值；

    2. 迭代器next函数的入参将作为yield的返回值（有点像运算符）。

  3、迭代器(Generator)

    迭代器是一个拥有 {value:{*}, done:{Boolean}} next([*])方法 和 {undefined} throw([*])方法 的对象，通过next函数不断执行以关键字yield分割的代码段，通过throw函数令yield分割的代码段抛出异常。

 

三、核心1——迭代器  

  迭代器更多的是指迭代器模式，迭代器模式是指通过一个名为迭代器的对象按一定的规则遍历集合元素，调用者只需告诉迭代器获取下一个元素即可，而集合的类 型、如何获取元素等因素均由具体的迭代器自行处理。（又一次地关注点分离！）并且由于迭代器模式可以做到 按需执行/延迟执行 的效果，因此能降低遍历无限序列时内存/栈溢出的问题，也能作为异步编程模式使用。

  模式理解的注意点：

      1. 迭代器每次进访问集合的一个元素，并由调用者发起访问请求时迭代器才执行下一次访问操作

      2. “按一定的规则”，意味着不一定遍历集合中所有的元素，并且规则可以内聚到迭代器的具体实现上，也可通过策略模式外移到其他模块中；

      3. “集合”，集合可以是一开始就已经初始化好的有限序列集合（如[1,2,3,4,5,6,7]），也可以是按需生成的无限序列集合（如1到无限大）

      4. “集合元素”，可以是整数集合、字符串集合等数据集合，也可以是函数等指令+数据的集合；

  若触过C#、Java等服务端语句的朋友应该对迭代器有一定程度的了解，C#的IEnumrable、IEnumerator和Java的 Iterable、Iterator就是跟迭代器相关的接口定义，继承上述接口的迭代器实现均可以通过foreach或for...in语句作循环操作。

  那么这里有2点是要注意的：

      1. 迭代器是指设计模式，跟具体的语言无关，因此所有语言均可根据该模式实现具体的迭代器；

      2. foreach或for...in语句是语法层面的支持，跟迭代器模式没有必然联系。（若语法层面不支持，那函数式编程中的递归的效果是一样的，假如编译器/解析器支持尾递归则更好了，可以JS不支持）

  下面我们通过迭代器来实现Python中的range函数，并通过range函数创建一个超大的有限序列正整数集合（直接用数组的话绝有可能导致栈溢出哦！）。

// 迭代器构造函数

var RangeIterator = function(start,end,scan){

 this.start = arguments.length = 2 ? start : 0 

 this.end = end == undefined ? start : end

 this.scan = scan || 1

 this.idx = this.start

// 向迭代器发起访问下一个元素的请求

// FF和ES6下迭代器接口规范定义了迭代器必须通过名为next的函数发起访问下一个元素的请求

RangeIterator.prototype.next = function(){

 if (this.idx this.end) 

 if (!!StopIteration) {

 throw StopIteration

 }else{

 return void 0

 var ret = this.idx

 this.idx += this.scan

 return ret

// Python中的range函数

var range = function(start, end, scan){

 var iterator = new RangeIterator(start, end, scan)

 return {

 // FF下令for...in语句调用对象的迭代器的接口规范

 __iterator__: function(){

 return iterator

 // 暴露迭代器的next函数

 next: function(){

 return iterator.next()

 toString: function(){

 // 可能会导致栈溢出

 var array = []

 for (var i = this.next(); i != void 0; i = this.next())

 array.push(i)

 return array + 

var r = range(1, 100000000000000000000)

// FF下

// 参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators#.E5.AE.9A.E4.B9.89.E8.87.AA.E5.AE.9A.E4.B9.89.E8.BF.AD.E4.BB.A3.E5.99.A8

for(var i in r)

 console.log(i) // 显示1到99999999999999999999

// 所有浏览器

for (var i = r.next(); i != void 0; i = r.next())

 console.log(i) // 显示1到99999999999999999999

  由于JS是单线程运行，并且当UI线程被阻塞N秒后，浏览器会询问是否停止脚本的执行，但上述代码并不会由于序列过大造成栈溢出的问题。假如预先生成1到99999999999999999999或更大数字的数组，那很有可能造成stack overflow。那是由于迭代器实质为一状态机，而调用next函数则是触发状态的转换，而状态机中同一时刻用于存放变量的存储空间固定，并不会出现无限增长的情况。

 

四、核心2——yield关键字  

   回到关键字yield上了，其实yield关键字就是以一种更直观、便捷的方式让我们创建用于遍历有限序列集合的迭代器，而yield则用于将生成器函数 的代码切片作为有限序列集合的元素（元素的类型为指令+数据，而不仅仅是数据而已）。下面我们一起看看yield关键字是怎样对代码切片的吧！

// 定义生成器函数

function *enumerable(msg){

 console.log(msg)

 var msg1 = yield msg +  after 

 console.log(msg1)

 var msg2 = yield msg1 +  after

 console.log(msg2 +  over)

}

  上述代码最终会被解析为下面的代码：

var enumerable = function(msg){

 var state = -1

 return {

 next: function(val){

 switch(++state){

 case 0:

 console.log(msg +  after)

 break

 case 1:

 var msg1 = val

 console.log(msg1 +  after)

 break

 case 2:

 var msg2 = val

 console.log(msg2 +  over)

 break

}

(注意：上述仅仅简单的分析，更复杂的情况（条件控制、循环、迭代、异常捕获处理等）可以参考@赵劼的《人肉反编译使用关键字yield的方法》)

 

 五、异步调用中的应用    

  由于迭代器模式实现 延迟执行/按需执行，因此可作为一种异步编程模式来应用。

var iterator = getArticles(dummy.json)

// 开始执行

iterator.next()

// 异步任务模型

function getData(src){

 setTimeout(function(){

 iterator.next({tpl: tpl.html, name: fsjohnhuang})

 }, 1000)

function getTpl(tpl){

 setTimeout(function(){

 iterator.next(hello ${name})

 }, 3000)

// 同步任务

function render(data, tpl){

 return tpl.replace(/\$\{(\w+)\}/, function(){

 return data[arguments[1]] == void 0 ? arguments[0] : data[arguments[1]]

// 主逻辑

function *getAritcles(src){

 console.log(begin)

 var data = yield getData(src)

 var tpl = yield getTpl(data.tpl)

 var res = render(data, tpl)

 console.log(rest)

}

  主逻辑中异步调用的写法与同步调用的基本没差异了，爽了吧！但异步任务模型与生成器函数及其生成的迭代器耦合性太大，还是不太好用。下面我们通过实现了Promises/A+规范的Q来进一步解耦。

  若执行引擎不支持关键字yield，那么上述代码不就无法执行了吗？还是那句话，yield关键字其实就是语法糖，最终还是会被解析为一个迭代器。因此我 们自行实现一个迭代器也是能实现上述效果的，不过过程会繁琐很多（若如第2节的示例那样存在try...catch语句，就繁琐死了@~@），并且代码的 整洁性、可维护性就全靠攻城狮来保证了。（语法糖从语法层面简化编程和维护难度，但理解底层的工作原理也十分重要哦！）

 

return tpl.replace(/\$\{(\w+)\}/, function(){ return data[arguments[1]] == void 0 ? arguments[0] : data[arguments[1]] // 主逻辑 Q.async(function *(){ console.log(begin) var data = yield getData(dummy.json) var tpl = yield getTpl(data.tpl) var res = render(data, tpl) console.log(rest) })

  暂未阅读Q的源代码，暂不作详细分析。反正API就这样用，呵呵！

 

七、与iPromise结合

  iPromise是我开发的一个Promises/A+的完整实现，阅读源码你会发现它继承了jQuery.Deferred1.5~2.1、 jsDeferred、mmDeferred和Promises/A官网实现示例的精妙设计，并且从v0.0.6开始支持ES6特性 GeneratorFunction。使用示例如下：

var getData = function(dataSrc){

 return iPromise(function(r){

 setTimeout(function(){

 r(dataSrc +  has loaded)

 }, 1000)

var getTpl = function(tplSrc){

 return iPromise(function(r){

 setTimeout(function(){

 r(tplStr +  has loaded)

 }, 2000)

var render = function(data, tpl){

 throw new Error(OMG!)

iPromise(function *(dataSrc, tplSrc){

 try{

 var data = yield getData(dataSrc)

 var tpl = yield getTpl(tplSrc)

 render(data, tpl)

 catch(e){

 console.log(e)

 console.log(over!)

}, dummyData.json, dummyTpl.json)

/* 结果如下 */

// 等待1秒多显示 dummyData.json has loaded

// 等待2秒多显示 dummyTpl.json has loaded

// 显示 Error: OMG!

// Stack trace:

// test10/render/ / @file:///home/fsjohnhuang/repos/iPromise/test/v0.0.2.html:190:6

// 显示 over!

v0.6.0的中通过递归来实现，具体如下（https://github.com/fsjohnhuang/iPromise/blob/master/src/iPromise.js#L76）：

// FF下生成器函数的入参必须在创建迭代器时传递

// 若第一次调用迭代器的next函数传递参数，则会报TypeError: attempt to send 第一个入参值 to newborn generator

var iterator = mixin.apply(null, toArray(arguments,1))

var next = function(){

 var deferred = iPromise()

 deferred.resolve.apply(deferred, arguments)

 return deferred.then(function(){

 var yieldReturn = iterator.next.apply(iterator, arguments)

 if(yieldReturn.done) throw Error(StopIteration)

 return yieldReturn.value

 }).then(next, function(e){

 iterator.throw(e)

deferred.resolve()

deferred.then(next)

八、总结

  Generator Function并不是为异步编程而生，但可以将它结合Promise来实现良好的异步编程模型。本篇内容仅简单介绍Generator Function及相关的异步编程内容，若有纰漏请各位指正，谢谢！

11 个 ES2022（ES13)中惊人的 JavaScript 新特性 与许多其他编程语言一样，JavaScript 也在不断发展，每年，该语言都会通过新功能变得更强大，让开发人员编写更具表现力和简洁的代码。
JS基础教程1——JS简介 JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
趣味 js —— 通过趣味案例走进 js 的世界 getElementById只能获取一个元素。 2.getElementsByTagName根据标签获取多个元素，并返回一个伪数组。及时获取的元素只有一个，也是以数组的形式储存。 3.style只能设置某一个元素的属性，但是getElementsByTagName返回的是一个数组，所以必须遍历这个数组才可以使用。（可以使用for循环遍历数组。）4.通过JavaScript操作的css属性，与css不相同
skrollr.js是一款轻量级且强大的js库，关于这款js库的相关的详细教程却不多。 所以这里根据国内一些大神们的笔记和skrollr官方文档进行总结，方便自己以后查阅，也方便大家学习。