Generator函数相关学习总结

由于最近学习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命令时,这个上下文环境又会重新加入调用栈,冻结的变量和对象恢复执行。