Generator函数相关学习总结

Posted on | Edited on | In

由于最近学习koa相关知识，想起来对Generator函数还有一些地方不是特别熟悉，所以参考阮一峰老师的博客进行一番自我总结，供自我学习使用。

参考 ：阮一峰老师es6)

一.概念

Generator 函数是 ES6 提供的一种异步编程解决方案,Generator 函数是一个状态机，封装了多个内部状态。

二.特征

有两个特征。一是，function关键字与函数名之间有一个星号；
二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。
调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象。
执行的时候，返回的遍利器，代表函数中的指针，以后每次调用遍利器对象的next方法，都有返回有着一个vlaue和done的两个属性值， value是yield表达式后面那个表达式的值，done标示是否遍历结束

1. yield 表达式：

1，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志
2.需要注意的是，yield表达式后面的表达式，只有当调用next方法、内部指针指向该语句时才会执行，因此等于为 JavaScript 提供了手动的“惰性求值”（Lazy Evaluation）的语法功能。
3.另外需要注意，yield表达式只能用在 Generator 函数里面，用在其他地方都会报错。
4.另外，yield表达式如果用在另一个表达式之中，必须放在圆括号里面。

1
2
3
4
5
6
7
function* demo() {
    console.log('Hello' + yield); // SyntaxError
    console.log('Hello' + yield 123); // SyntaxError

   console.log('Hello' + (yield)); // OK
    console.log('Hello' + (yield 123)); // OK
}

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

1
2
3
4
function* demo() {
    foo(yield 'a', yield 'b'); // OK
     let input = yield; // OK
}

6.yield表达式与return语句既有相似之处，也有区别：
在语句后面的那个表达式的值。区别在于每次遇到yield，函数暂停执行，下一次再从该位置继续向后执行，而return语句不具备位置记忆的功能，yield 可以执行多次，一般到retrue就结束了，只有一次。

2.next 方法的参数

  1. yield 本身没有返回值，或者总是返回undefindd， 但是 next方法可以带一个参数，该参数可以当作上一个yield表达式的返回值。

  2. next（‘参数’） next 传入参数，可以起到重制参数的作用，这样可以调整调整函数行为

    • 注意，由于next方法的参数表示上一个yield表达式的返回值 上一次next的值改成这个参数可以。
  • 注意，由于next方法的参数表示上一个yield表达式的返回值，所以在第一次使用next方法时，传递参数是无效的。V8 引擎直接忽略第一次使用next方法时的参数，只有从第二次使用next方法开始，参数才是有效的。从语义上讲，第一个next方法用来启动遍历器对象，所以不用带有参数。

    三.for of 与 Generator函数

    1. for of 循环可以自动生成生成的Iterator对象。所以不需要再调用next方法, (需要注意，一旦next方法的返回对象的done属性为true，for…of循环就会中止,，且不包含该返回对象，所以上面代码的return语句返回的6，不包括在for…of循环之中。)
      1
      2
      3
      4
      5
       for (let n of fibonacci()) {
           if (n > 1000) break;
           console.log(n);
       }
      // 1 2 3 4 5
  1. 利用for…of循环，可以写出遍历任意对象（object）的方法。原生的 JavaScript 对象没有遍历接口，无法使用for…of循环，通过 Generator 函数为它加上这个接口，就可以用了。
  2. 除了for…of循环以外，扩展运算符（…）、解构赋值和Array.from方法内部调用的，都是遍历器接口。这意味着，它们都可以将 Generator 函数返回的 Iterator 对象，作为参数。

四 yield*

ES6 提供了yield表达式，作为解决办法，用来在一个 Generator 函数里面执行另一个 Generator 函数。
yield后面的 Generator 函数（没有return语句时），等同于在 Generator 函数内部，部署一个for…of循环。

五generator throw 属性

  1. 第一次的错误会先被函数内的catch 捕获到，（throw方法抛出的错误要被内部捕获，前提是必须至少执行过一次next方法。）因为函数内部的比较快，而当函数内部catch执行完了以后才能又外部的catch 捕获

  1. 如果没有执行next（） 那么发生错误只能抛在函数外部/

  2. throw方法被捕获以后，会附带执行下一条yield表达式。也就是说，会 附带执行一次next方法。

4.只要 Generator 函数内部部署了try…catch代码块，那么遍历器的throw方法抛出的错误，不影响下一次遍历。

1
2
3
4
5
6
7
8

var g = function* () {
    try {
        yield;
    } catch (e) {
        console.log('内部捕获', e);
    }
};

1
2
3
4
5
6
7
8
9
10
11
12

var i = g();
i.next();

try {
   
    i.throw('a');
    i.throw('b');

} catch (e) {
    console.log('外部捕获', e);
}

六 Generator.prototype.return()

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

1
2
3
4
5
6
7
8
9
10
11
function* gen() {
    yield 1;
    yield 2;
    yield 3;
}

var g = gen();

g.next()        // { value: 1, done: false }
g.return('foo') // { value: "foo", done: true }
g.next()        // { value: undefined, done: true }

七 作为对象属性的 Generator 函数

作为对象属性的 Generator 函数
如果一个对象的属性是 Generator 函数，可以简写成下面的形式。

1
2
3
4
let obj1 = {
    * myGeneratorMethod() {
    }
};

// 上面代码中，myGeneratorMethod属性前面有一个星号，表示这个属性是一个 Generator 函数。

// 它的完整形式如下，与上面的写法是等价的。

1
2
3
4
5
// let obj = {
//     myGeneratorMethod: function* () {
//         // ···
//     }
// };

八 Generator 函数的this

  1. ES6 规定这个遍历器是 Generator 函数的实例，也继承了 Generator 函数的prototype对象上的方法。
    2.但是不能当成普通的构造函数使用， 因为generator返回的是遍利器不是对象，所以不能访问其属性，
  2. Generator 函数也不能跟new命令一起用，会报错。
  1. 那么，有没有办法让 Generator 函数返回一个正常的对象实例，既可以用next方法，又可以获得正常的this？
  • 下面是一个变通方法。首先，生成一个空对象，使用call方法绑定 Generator 函数内部的this。这样，构造函数调用以后，这个空对象就是 Generator 函数的实例对象了。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function* F() {
        this.a = 1;
        yield this.b = 2;
        yield this.c = 3;
    }
    var obj = {};
    var f = F.call(obj);

    f.next();  // Object {value: 2, done: false}
    f.next();  // Object {value: 3, done: false}
    f.next();  // Object {value: undefined, done: true}

    obj.a // 1
    obj.b // 2
    obj.c // 3

上面代码中，首先是F内部的this对象绑定obj对象，然后调用它，返回一个 Iterator 对象。这个对象执行三次next方法（因为F内部有两个yield表达式），完成 F 内部所有代码的运行。这时，所有内部属性都绑定在obj对象上了，因此obj对象也就成了F的实例。

5.上面代码中，执行的是遍历器对象f，但是生成的对象实例是obj，有没有办法将这两个对象统一呢？

一个办法就是将obj换成F.prototype。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function* F() {
    this.a = 1;
    yield this.b = 2;
    yield this.c = 3;
}
var f = F.call(F.prototype);

f.next();  // Object {value: 2, done: false}
f.next();  // Object {value: 3, done: false}
f.next();  // Object {value: undefined, done: true}

f.a // 1
f.b // 2
f.c // 3
// 再将F改成构造函数，就可以对它执行new命令了。

function* gen() {
    this.a = 1;
    yield this.b = 2;
    yield this.c = 3;
}

function F() {
    return gen.call(gen.prototype);
}

var f = new F();

f.next();  // Object {value: 2, done: false}
f.next();  // Object {value: 3, done: false}
f.next();  // Object {value: undefined, done: true}

f.a // 1
f.b // 2
f.c // 3

九 协程与 Generator 函数

Generator 函数是 ES6 对协程的实现，但属于不完全实现。Generator 函数被称为“半协程”（semi - coroutine），意思是只有 Generator 函数的调用者，才能将程序的执行权还给 Generator 函数。如果是完全执行的协程，任何函数都可以让暂停的协程继续执行。

如果将 Generator 函数当作协程，完全可以将多个需要互相协作的任务写成 Generator 函数，它们之间使用yield表达式交换控制权。

十 Generator 与上下文

JavaScript 代码运行时，会产生一个全局的上下文环境（context，又称运行环境），包含了当前所有的变量和对象。然后，执行函数（或块级代码）的时候，又会在当前上下文环境的上层，产生一个函数运行的上下文，变成当前（active）的上下文，由此形成一个上下文环境的堆栈（context stack）。

这个堆栈是“后进先出”的数据结构，最后产生的上下文环境首先执行完成，退出堆栈，然后再执行完成它下层的上下文，直至所有代码执行完成，堆栈清空。

Generator 函数不是这样，它执行产生的上下文环境，一旦遇到yield命令，就会暂时退出堆栈，但是并不消失，里面的所有变量和对象会冻结在当前状态。等到对它执行next命令时，这个上下文环境又会重新加入调用栈，冻结的变量和对象恢复执行。