第十六章 Generator函数的语法

基本概念

  Generator函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同。
  Generator函数除了是状态机,还是一个遍历器对象生成函数,所以可以把Generator函数放在Symbol.iterator属性上。
  形式上,Generator函数是一个普通函数,但是有两个特征:一是function命令与函数名之间有一个星号;二是函数体内部使用yield语句定义不同的内部状态。

Generator函数是遍历器生成函数,调用Generator函数返回遍历器对象,调用遍历器对象返回成员信息,跟Iterator遍历器很相似。Generator函数是分段执行的,yield语句是暂停执行的标记,而next方法可以恢复执行。

yield表达式

yield语句就是暂停标志,遍历器对象的next方法的运行逻辑如下:
1.遇到yield语句就暂停执行后面的操作,并将紧跟在yield后的表达式的值作为返回的对象的value属性值。
2.下一次调用next方法时再继续往下执行,直到遇到吓一条yield语句。
3.如果没有再遇到新的yield语句,就一直运行到函数结束,直到return语句为止,并将return语句后面的表达式的值作为返回对象的value属性值。
4.如果该函数没有return语句,则返回对象的value属性值为undefined。
下面是一个Generator函数的例子

let arr = [1, [[2, 3], 4], [5, 6]]
let flat = function* (a) {
    let length = a.length
    for (let i = 0; i < length; i++) {
        let item = a[i]
        if (typeof item !== 'number') {
            yield* flat(item)
        } else {
            yield item
        }
    }
}
for (let f of flat(arr)) {
    console.log(f)
}
// 1 2 3 4  5 6

另外,yield表达式如果用在另一个表达式之中,必须放在圆括号里面。

function* demo () {
    console.log('Hello' + yield)         // 报错
    console.log('Hello' + yield 123)     // 报错

   console.log('Hello' + (yield))      // 正确
   console.log('Hello' + (yield 123))  // 正确

yield表达式用作函数参数或放在赋值表达式的右边,可以不加括号。

function* demo () {
    foo(yield 'a', yield 'b')    // ok
    let input = yield            //ok
}

与Iterator接口的关系

由于Generator函数就是遍历器生成函数,因此可以把Generator赋值给对象的Symbol.iterator属性,从而使得该对象具有Iterator接口。

let myIterator = {}
myIterator[Symbol.iterator] = function* () {
     yield 1
     yield 2
     yield 3
}
[...myIterator]    // [1,2,3]

上面代码中,Generator函数赋值给Symbol.iterator属性,从而使得myIterator对象具有了Iterator接口,可以被扩展运算符遍历。
Generator函数执行后,返回一个遍历器对象。该对象本身也具有Symbol.iterator属性,执行后返回自身。

function* gen () {
    // some code
}
let g = gen()
g[Symbol.iterator]() === g
// true

yield表达式只能用在Generator函数里面,用在其他地方会报错。

next方法的参数

yield语句本身没有返回值,或者说总是返回undefined。next方法可以带有一个参数,该参数会被当作上一条yield语句的返回值。

function* f() {
   for (let i = 0; true; i++) {
         let reset = yield i;
         if (reset) {
         i = -1
       }
     }
}
let g = f()
console.log(g.next())       // {value: 0, done: false}
console.log(g.next())       // {value: 1, done: false}
console.log(g.next(true))   // {value: 0, done: false}

  上面的代码先定义了一个可以无限运行的Generator函数f,如果next方法没有参数,每次运行到yield语句时,变量reset的值总是undefined。当next方法带有一个参数true时,当前的变量reset就被重置为这个参数(即true),因而i会等于-1,下一轮循环就从-1开始递增。
  这个功能有很重要的语法意义。Generator函数从暂停状态到恢复运行,其上下文状态(context)是不变的。通过next方法的参数就有办法在Generator函数开始运行后继续向函数体内部注入值。也就是说,可以在Generator函数运行的不同阶段从外部向内部注入不同的值,从而调整函数行为。

function* foo(x) {
    let y = 2 * (yield( x + 1 ))
    let z = yield ( y/3 )
    return ( x + y + z )
}
let a = foo(5)
a.next()   // {value: 6, done: false}
a.next()   // {value: NaN, done: false}
a.next()   // {value: NaN, done: false}
let b = foo(5)
b.next()   // {value: 6, done: false}
b.next(12)   // {value: 8, done: false}
b.next(13)   // {value: 42, done: false}

  上面代码中运行next方法不带参数,导致yield返回值为undefined,所以导致y为NaN,z为NaN。
  如果向next方法提供参数,返回结果就完全不一样了。上面的代码第一次调用b值时,返回的是6,第二次调用next方法,将上一次yield语句的值设为12,因此y的值等于24,返回8,第三次调用next方法,将上一次yield语句的值设为13,因此z等于13,return的值为42。

for...of循环

for...of循环可以自动遍历Generator函数生成的Iterator对象,且此时不需要调用next方法。

function* foo() {
    yield 1
    yield 2
    yield 3
    yield 4
    yield 5
    return 6
}
for (let v of foo()) {
    console.log(v)
}
// 1 2 3 4 5

一旦next方法的返回对象的done值为true,for...of循环就会终止,且不包含该返回对象。
原生js对象没有遍历接口,无法被for...of循环,通过Generator函数为它加上这个接口后就可以用了。

function* objectEntries(obj) {
    let propKeys = Reflect.ownKeys(obj)
}
for (let key of propKeys) {
    yield[key, obj[key]]
}
let jane = {first: 'jane', last: 'doe'}
for (let [key, value] of objectEntries(jane)) {
    console.log(`${key}: ${value}`)
}
// first: jane
// last: doe

上面代码遍历的是Iterator对象,不是jane对象,因为jane对象不具备Iterator接口,无法用for...of遍历。这时,我们通过Generator函数objectEntries为它加上遍历器接口,就可以用for...of遍历了。

function* objectEntries() {
    let propKeys = Object.keys(this)
}
for (let key of propKeys) {
    yield[key, this[key]]
}
let jane = {first: 'jane', last: 'doe'}
jane[Symbol.iterator] = objectEntries
for (let [key, value] of jane) {
    console.log(`${key}: ${value}`)
}
// first: jane
// last: doe

Generator.prototype.throw()

Generator函数返回的遍历器对象都有一个throw方法,可以在函数体外抛出错误,然后在Generator函数体内捕获。

let g = function* () {
    try {
        yield
    } catch (e) {
        console.log('内部捕获', e)
    }
}
let i = g()
i.next()
try {
    i.throw('a')
    i.throw('b')
} catch (e) { 
    console.log('外部捕获', e)
}
// 内部捕获, a
// 外部捕获,b

上面代码中,遍历器对象i连续抛出两个错误,第一个错误被Generator函数体内的catch语句捕获。第二次抛出错误,由于Generator函数内部的catch语句已经执行过了,不会再捕获到这个错误了,所以这个错误就被抛出了Generator函数体,被函数体外的catch语句捕获。不要混搅遍历器对象的throw方法和全局的throw命令。上面的错误是用遍历器对象throw方法抛出的,而不是用throw命令抛出的。后者只能被函数体外的catch语句捕获。

Generator.prototype.return()

Generator函数返回的遍历器对象还有一个return方法,可以返回给定的值,并终结Generator函数的遍历。

function* gen() {
    yield 1
    yield 2
    yield 3
}
let g = gen()
g.next()     // {value: 1, done: false}
g.return('foo')   // {value: 'foo', done: true}
g.next()   // {value: undefined, done: true}

如果return方法调用时不提供参数,则返回值的value属性为undefined。
如果Generator函数内部有try...finally代码块,那么return方法会推迟到finally代码块执行完再执行。

function* numbers () {
    yield 1
    try {
        yield 2
    } finally {
       yield 3
    }
       yield 4
}
let g = numbers()
g.next()   // {value: 1, done: false}
g.return(5)   // {value: 2, done: false}
g.next()   // {value: 3, done: false}
g.next()   // {value: 5, done: true}

上面代码中,调用return方法后就开始执行finally代码块,然后等到finally代码块执行完再执行return方法。

yield*表达式

直接在Generator函数内部调用另一个Generator,是没有效果的,所以需要用到yield*语句,用来在一个Generator函数里面执行另一个Generator函数。

function* foo () {
    yield 'a'
    yield 'b'
}
function* bar () {
    yield 'x'
    yield* foo()
    yield 'y'
}
// 等同于
function* bar () {
    yield 'x'
    yield 'a'
    yield 'b'
    yield 'y'
}
// 等同于
function* bar () {
    yield 'x'
    for (let v of foo()) {
         yield v
    }
    yield 'y'
}
for (let i of bar()) {
     console.log(i)
}
//  x a b y

yield后面的Generator函数(没有return语句时)等同于在Generator函数内部部署了一个for...of循环。实际上,任何数据结构只要有Iterator接口,就可以被yield遍历。

let read = (function* () {
     yield 'hello'
     yield* 'hello'
})
read.next().value    // hello
read.next().value    // h

如果被代理的Generator函数有return语句,那么便可以向代理它的Generator函数返回数据。

function* foo () {
    yield 2
    yield 3
    return 'foo'
}
function* bar () {
    yield 1
    let v = yield* foo()
    console.log('v' + v)
    yield 4
}
let it = bar()
it.next()     // {value: 1, done: false}
it.next()     // {value:2, done: false}
it.next()     // v: 'foo'  {value: 4, done: false}
it.next()     // {value: undefined, done: true}

yield*命令可以很方便地取出嵌套数组的所有成员(类似递归)。

function* iterTree(tree) {
    if (Array.isArray(tree)) {
         for (let i = 0; i < tree.length; i++) {
              yield* iterTree(tree[i])
         }
    } else {
          yield tree
    }
}
const tree = ['a', ['b', 'c'], ['d', 'e']]
for (let x of iterTree(tree)) {
    console.log(x)
}
// a b c d e

作为对象属性的Generator函数

如果一个对象的属性是Generator函数,那么可以简写成下面的形式

let obj = {
    * myGeneratorFun () {
     ...
     }
}
// 等同于
let obj = {
    myGeneratorFun: function* () {
     ...
     }
}

Generator函数this

Generator函数不是构造函数,它总是返回一个遍历器,ES6规定这个遍历器是Generator函数的实例,它也继承了Generator函数的prototype对象上的方法。

function* g() {}
g.prototype.hello = function () {
     return 'hi'
}
let obj = g()
obj instanceof g // true
obj.hello()      // 'hi'

上面的代码表明,Generator函数g返回的遍历器obj是g的实例,而且继承了g.prototype。但是如果把g当作普通的构造函数,则不会生效,因为g返回的总是遍历器对象,而不是this对象。

function* g() {
    this.a = 11
}
let obj = g()
obj.a    // undefined

Generator函数也不能跟new命令一起用,否则会报错。

function* F() {
    yield this.x = 2
    yield this.y = 3
}
new F()  // F is not a constructor

上面代码中,new命令跟构造函数F一起使用,结果报错,因为F不是构造函数。

含义

Generator与状态机

Generator是实现状态机的最佳结构。比如,下面的clock函数就是一个状态机。

let ticking = true
let clock = function () {
    if (ticking) {
         console.log('tick')
    } else {
         console.log('tock')
   }
   ticking = !ticking
}

上面的clock函数一共有两种状态(tick和tock),每运行一次,就改变一次状态。这个函数用Generator实现,代码如下:

let clock = function* () {
     while (true) {
          console.log('tick')
          yield
          console.log('tock')
          yield
     }
}

上面代码对比我们发现,少了用来保存状态的外部变量ticking,因为Generator函数不需要外部变量保存状态,它本身就包含了状态信息,即目前是否为暂停状态。

Generator与协程

协程是一种程序运行的方式,可以理解成"协作的线程"或"协作的函数"。协程既可以用单线程实现,也可以用多线程实现。前者是一种特殊的子例程,后者是一种特殊的线程。

协程与子例程的差异

传统的"子例程"采用堆栈式"后进先出"的执行方式,只有当调用的子函数完全执行完毕,才会结束执行父函数。协程与其不同,多个线程(单线程情况下即多个函数)可以并行执行,但只有一个线程(或函数)处于正在运行的状态,其他线程(或函数)都处于暂停态,线程(或函数)之间可以交换执行权。也就是说,一个线程(或函数)执行到一半,可以暂停执行,将执行权交给另一个线程(或函数),等到稍后收回执行权时再恢复执行。这种可以并行执行、交换执行权的线程(或函数)就成为协程。
从实现上看,在内存中子例程只是用一个栈,而协程是同时存在多个栈,但只有一个栈是在运行态。也就是说,协程是以多占用内存为代价实现多任务的并行运行。

协程与普通线程的差异

不难看出,协程适用于多任务运行的环境。在这个意义上,它与普通的线程很相似,都有自己的执行上下文,可以分享全局变量。它们的不同之后在于,同一时间可以有多个线程,但是运行的协程只能有一个,其他协程都处于暂停态。此外,普通的线程是抢占式的,到底哪个线程优先得到资源,必须由运行环境决定,但是协程是合作式的,执行权由协程自己分配。
由于javascript是单线程语言,只能保持一个调用栈。引入协程以后,每个任务都可以保持自己的调用栈。这样做最大的好处就是抛出错误的时候,可以找到原始的调用栈。不至于像异步操作的回调函数那样,一旦出错原始的调用栈早就结束。
Generator函数对协程不完全实现,所以被成为"半协程",意思是只有Generator函数的调用者才能将执行权还给Generator函数。如果完全实现协程,任何函数都可以让暂停的协程继续执行。
如果将Generator函数当作协程,完全可以将多个需要互相协作的任务写成Generator函数,它们之间使用yield语句交换控制权。

应用

异步操作的同步化表达

Generator函数的暂停执行效果,意味着可以把异步操作写在yield语句里面,等到调用next方法时再往后执行。这实际上等同于不需要写回调函数了,因为异步操作的后续操作可以放在yield语句下面,反正要等到调用next方法时再执行。所以Generator函数的一个重要实际意义就是用于处理异步操作,改写回调函数。

function* loadUi () {
    let result = yield loadUiAsync()
    let resp = JSON.parse(result)
    console.log(result.value)
}
function loadUiAsync () {
     makeAjaxCall('http://some.url', function(response) {
            it.next(response)
     })
}
let it = loadUi()
it.next()

之前用Promise写异步需要用reject方法触发then中第一个回调函数,现在只需要调用next方法就可以执行,回调函数可以写在外面。
注意:for...of本质上是一个while循环

let it = iterateJobs(jobs)
let res = it.next()
while (!res.done) {
    let result = res.value
    res = it.next()
}

你可能感兴趣的:(第十六章 Generator函数的语法)