ES6进修笔记之Generator函数

2024年3月4日 133次阅读 来源: hieeyh

之前断断续续打仗到了一些ES6的学问，异步编程方面听得比较多的就是Promise，直到近来比较体系地进修了ES6的新特征才发明Generator这个奇异的存在，它能够完成一些亘古未有的事变，让我马上对它充满了兴致。

为何须要Generator？

JavaScript异步编程是为处理JavaScript实行环境是“单线程”这个题目的。在JavaScript中，异步编程的运用异常频仍，也常常会涌现须要逐渐完成多个异步操纵的状况。之前用回调函数完成异步编程假如遇到了这类题目就须要嵌套运用回调函数，异步操纵越多，嵌套得就越深，如许异常不利于代码的保护，代码浏览起来也很难题。Generator函数是ES6提出的一种异步编程处理方案，它能够防止回调的嵌套，然则它的用途可不仅仅如此哦，待我细细道来。

举个小例子

function* gen1() {
    yield 1;
    yield 'hello';
    return true;
}
let g1 = gen1();
g1.next();  // Object {value: 1, done: false}
g1.next();  // Object {value: "hello", done: false}
g1.next();  // Object {value: true, done: true}
g1.next();  // Object {value: undefined, done: true}

上面的代码就定义了一个Generator函数，Generator函数的定义跟平常函数差不多，只是在function关键字背面加了一个星号。挪用Generator函数后和平常函数差别的是，该函数并不马上实行，也不返回函数实行效果，而是返回一个指向内部状况的generator对象，也能够看做是一个遍历器对象。然后必需挪用该对象的next要领，让函数继续走下去，是指针移向下一个状况。每当遇到yield语句,内部指针就停下来，直到下一次挪用next()才最先实行。
上面代码挪用了四次next要领，遍历才完毕。next要领会返回一个有两个属性的对象，value属性的值为当前yield语句的值，done属性的值示意遍历是不是完毕，即末了一次挪用next要领时，再也碰不到yield或许return语句了。
星号写在哪：
function关键字和函数名之间的星号写在哪都能够，只需在二者之间即可，然则平常都采用我上面代码的那种写法。

Generator函数实质

上面说了那末多，想必人人已晓得Generator函数是怎样用的了，那末Generator实质上究竟是个啥呢？Generator函数的明白有多种：

  1. Generator函数能够被明白成一个状况机，内里封装了多种状况，有兴致的同砚能够去相识一下状况机，操纵体系的书里都邑讲到。

  2. Generator函数还能够被明白成一个遍历器对象天生器，它返回的遍历器对象能够顺次遍历Generator函数内部的每个状况。这就是为何之前说Generator函数不仅是为了处理回调函数嵌套题目。Generator函数是天生一个对象，然则挪用的时刻前面不能加new敕令。

yield语句

yield语句是Generator函数内部能够停息实行顺序的语句，yield语句背面的值能够是种种数据类型，字符串，整数，布尔值等等都能够。这里主要想说说Generator函数中yield语句和return语句的区分。

和return语句区分

从上面的例子能够看出，函数不仅是遇到yield语句才会住手实行，遇到return语句也会住手实行。这很轻易明白，不论怎样Generator函数也是一个函数，遇到return语句必然会住手实行，返回值。那末，二者的区分是什么呢？先来看个例子：

function* gen2() {
    return true;
    yield 1;
    yield 'hello';
}
let g2 = gen2();
g2.next();  // Object {value: true, done: true}
g2.next();  // Object {value: undefined, done: true}

从上面例子能够看出，当遇到return语句时，返回对象的done属性值就为true，遍历完毕，不论背面是不是另有yield或许return语句。这类区分实质上是由于yield语句具有位置影象功用而return语句则没有该功用。

再说一点

Generator函数，不论内部有无yield语句，挪用函数时都不会实行任何语句，只有当挪用next(),内部语句才会实行，只需挪用next()，就会返回一个对象。yield语句只是函数停息实行的一个标记。

function* gen3() {
    console.log('实行了么？');
}
let g3 = gen3();  // 没有任何输出
g3.next();
// 实行了么？
// Object {value: undefined, done: true}

注重：yield函数不能在平常函数中运用，不然会报错。

next要领

除了yield语句，next要领也是Generator函数完成中很主要的特征。既然next()是一个函数，那末这个函数能够带参数么，固然能够。上面的例子比较简单，都只是一些纯真的yield语句，实在Generator函数和平常函数一样内里是能够举行种种庞杂的盘算和操纵的，也能够有种种轮回语句，不仅next要领能够传参数，Generator函数也是能够传参数的，立马上例子：

function* gen4(a) {
    let b = yield (a + 1);
    return b * 2;
}
let g4 = gen4(1);
g4.next();  //  Object {value: 2, done: false}
g4.next();  //  Object {value: NaN, done: true}
let g5 = gen4(1);
g5.next();  //  Object {value: 2, done: false}
g5.next(3);  //  Object {value: 6, done: true}

上面例子中，Generator函数须要吸收一个参数a，表面上变量b是用yield语句赋值了，然则遗憾的是这个赋值彷佛并没有胜利，当第二次挪用next要领（没有传参数）时，返回的对象value值竟然为NaN，而不是我们想的 2 *（1+1）= 4。然则假如第二次挪用next要领时，传入一个参数3，返回对象的value值就为6。这能够申明两点：

  1. yield语句没有返回值，或许老是返回undefined；

  2. next要领假如带上一个参数，这个参数就是作为上一个yield语句的返回值。

注重：由于next要领示意上一个yield语句的返回值，所以必需有上一个yield语句的存在，那末第一次挪用next要领时就不能传参数。第一个next只是用来启动Generator函数内部的遍历器，传参也没有多大意义。

再说Generator函数与平常函数区分

能够用prototype么？

虽然Generator函数和平常函数区分很大，然则Generator函数的实例也能够继续Generator函数的prototype对象上的要领。

function* gen5() {}
gen5.prototype.say = function() {
    console.log('有generator?');
}
let g6 = gen5();
g6.say();  // 有generator?

从上面代码能够看出，Generator函数返回的g6，继续了gen5.prototype。

this咋用？

人人都晓得平常函数都邑有一个this对象，那末Generator的this对象怎样用呢？照样例子更直观：

function* gen6() {
    this.a = 1;
}
let g7 = gen6();
g7.a;  //  undefined

上面代码中，Generator函数在this对象上添加了一个属性a，g7实例并不能取到这个属性。那末怎样让Generator函数返回一个能够一般运用this对象的实例呢？阮一峰先生供应了一种要领，起首，天生一个空对象，运用call要领绑定Generator函数内部的this。如许，组织函数挪用今后，这个空对象就是Generator函数的实例对象了。参考代码在这：http://es6.ruanyifeng.com/#docs/generator

Generator函数与Iterator

Generator函数返回的是一个遍历器对象，那末它在遍历这方面一定有用武之地，下一次议论Iterator时刻再总结吧。

    原文作者：hieeyh
    原文地址: https://segmentfault.com/a/1190000007720963
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞