前端

Generator函数相关学习总结

2019-11-21  本文已影响0人  不伟心

由于最近学习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表达式如果用在另一个表达式之中,必须放在圆括号里面。

 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表达式用作函数参数或放在赋值表达式的右边,可以不加括号。

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 传入参数,可以起到重制参数的作用,这样可以调整调整函数行为

三.for of 与 Generator函数

  1. for of 循环可以自动生成生成的Iterator对象。所以不需要再调用next方法, (需要注意,一旦next方法的返回对象的done属性为true,for...of循环就会中止,,且不包含该返回对象,所以上面代码的return语句返回的6,不包括在for...of循环之中。)
 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 捕获

  2. 如果没有执行next() 那么发生错误只能抛在函数外部/

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

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


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

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

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

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

六 Generator.prototype.return()

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

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 函数,可以简写成下面的形式。

let obj1 = {
    * myGeneratorMethod() {
    }
};

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

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

// let obj = {
//     myGeneratorMethod: function* () {
//         // ···
//     }
// };

八 Generator 函数的this

  1. ES6 规定这个遍历器是 Generator 函数的实例,也继承了 Generator 函数的prototype对象上的方法。
    2.但是不能当成普通的构造函数使用, 因为generator返回的是遍利器不是对象,所以不能访问其属性,
  2. Generator 函数也不能跟new命令一起用,会报错。
  1. 那么,有没有办法让 Generator 函数返回一个正常的对象实例,既可以用next方法,又可以获得正常的this?
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。

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

上一篇下一篇

猜你喜欢

热点阅读