Generator函数相关基础知识点回顾总结

最近有项目需要用到koa，所以就顺带来回顾下当年学了但已忘得差不多的Generator函数，时隔接近两年的时光，再次回顾ES6 Generator函数，说没有感慨是不可能的，想想以前是多么的青涩，觉得自己对前端无所不能，无所不通。一年多后才知道，还是太年轻啦，学的东西还有很多，脚踏实地，一步一个脚印，踩稳，踩实。

详细文档地址：http://es6.ruanyifeng.com/#docs/generator

Generator函数

1. 基本概念

Generator 函数是 ES6 提供的一种异步编程解决方案，函数封装了多个内部状态，函数会返回一个遍历器对象，可以遍历Generator 函数内部的每一个状态。其形式与普通函数几乎一致，只是function后面紧接着一个“*”，函数内部使用yield表达式定义不同的状态

初体验第1个小案例：

function* helloWorldGenerator() {
  yield 'hello!';
  yield 'Are you ok?';
  return 'ending';
}

var hw = helloWorldGenerator();

console.log(hw);         // helloWorldGenerator {<suspended>}
console.log(hw.next());  // {value: "hello!", done: false}
console.log(hw.next());  // {value: "Are you ok?", done: false}
console.log(hw.next());  // {value: "ending", done: true}
console.log(hw.next());  // {value: undefined, done: true}

该案例得出的结论：

调用Generator函数后，函数并不执行。且Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或者上次停下的地方开始执行，直到遇到下一个yield表达式（或return语句为止）。Deone属性表示遍历器是否遍历结束。

2. yield 表达式

yield表达式就是暂停标志。yield表达式后面的表达式，只有当调用next方法、内部指针指向该语句时才会执行。

注意事项：

（1）yield语句只能用在function* 的作用域中调用，如果function* 的内部还定义了其他的普通函数，则函数内部不允许使用yield语句
（2）yield语句如果参与运算，必须用小括号括起来
（3）yield表达式本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个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
}

// 赋值运算符，不用加小括号
function* demo() {
  foo(yield 'a', yield 'b'); // OK
  let input = yield; // OK
}

3. yield* 表达式

由于在 Generator 函数内部，调用另一个 Generator 函数，默认情况下是没有效果的。所以需要用到yield*表达式，用来在一个 Generator 函数里面执行另一个 Generator 函数。

第1个测试小案例：

function* foo() {
  yield 'a';
  yield 'b';
}

function* bar() {
  yield 'x';
  foo();
  yield 'y';
}

for (let v of bar()){
  console.log(v);
}

// x y

第2个测试小案例：

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 v of bar()){
  console.log(v);
}

// x a b y

4. *return和yield的区别

（1）return结束遍历，之后的yield语句都失效；next返回本次yield语句的返回值
（2）return没有参数的时候，返回{ value: undefined, done: true }；next没有参数的时候返回本次yield语句的返回值，默认undefined
（3）return有参数的时候，覆盖本次yield语句的返回值，也就是说，返回 { value: 参数, done: true }; next有参数的时候，覆盖上次yield语句的返回值，返回值可能跟参数有关（参数参与计算的话），也可能跟参数无关（参数不参与计算）

案例分析：

function* foo(x) {
  var y = 2 * (yield (x + 1));
  var z = yield (y / 3);
  return (x + y + z);
}

var a = foo(5);
a.next() // Object{value:6, done:false}
a.next() // Object{value:NaN, done:false}
a.next() // Object{value:NaN, done:true}

var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false }
b.next(13) // { value:42, done:true }

注解：

Generator.prototype.return()
Generator 函数返回的遍历器对象，还有一个return方法，可以返回给定的值，并且终结遍历 Generator 函数。如果不提供参数，则返回值的value属性为undefined

Generator.prototype.next()
“yield表达式本身没有返回值，或者说总是返回undefined”。next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。所以在第一次使用next方法时，传递参数是无效的。

运行逻辑：

（1）遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。
（2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。
（3）如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。
（4）如果该函数没有return语句，则返回的对象的value属性值为undefined。

测试案例：

function* f() {
  for(var i = 0; true; i++) {
    var reset = yield i;
    if(reset) { i = -1; }
  }
}

var g = f();

g.next()  // { value: 0, done: false }
g.next()  // { value: 1, done: false }
g.next(true)  // { value: 0, done: false }  reset = true

5.for...of..循环

可以自动遍历 Generator 函数时生成的Iterator对象，且此时不再需要调用next方法。一旦next方法的返回对象的done属性为true，for…of循环就会中止，且不包含该返回对象。

测试案例：

function* foo() {
  yield 1;
  yield 2;
  return 3;
}

for (let v of foo()) {
  console.log(v);
}
// 1 2

6.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!'

7.next()、throw()、return() 的共同点

next()、throw()、return()这三个方法本质上是同一件事，可以放在一起理解。它们的作用都是让 Generator 函数恢复执行，并且使用不同的语句替换yield表达式

（1）next()是将yield表达式替换成一个值

测试案例：

const g = function* (x, y) {
  let result = yield x + y;
  return result;
};

const gen = g(1, 2);
gen.next(); // Object {value: 3, done: false}
gen.next(1); // Object {value: 1, done: true}
// 相当于将 let result = yield x + y
// 替换成 let result = 1;

（2）throw()是将yield表达式替换成一个throw语句

gen.throw(new Error('出错了')); // Uncaught Error: 出错了
// 相当于将 let result = yield x + y
// 替换成 let result = throw(new Error('出错了'));

（3）return()是将yield表达式替换成一个return语句

gen.return(2); // Object {value: 2, done: true}
// 相当于将 let result = yield x + y
// 替换成 let result = return 2;

致自己：踏实一些，不要着急，你想要的，岁月都会给你 ~~

Generator函数相关基础知识点回顾总结

Generator函数

猜你喜欢