ES6学习笔记14 Generator 函数

àì夳堔傛蜴生んèń 2022-05-20 02:41 228阅读 0赞

## 简介 ##

**`Generator` 函数有多种理解角度。语法上，首先可以把它理解成，`Generator` 函数是一个状态机，封装了多个内部状态。**

**执行 `Generator` 函数会返回一个遍历器对象，也就是说，`Generator` 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 `Generator` 函数内部的每一个状态。**

**形式上，`Generator` 函数是一个普通函数，但是有两个特征。一是，`function`关键字与函数名之间有一个星号；二是，函数体内部使用`yield`表达式，定义不同的内部状态。**

function* helloWorldGenerator() { 
      yield 'hello';
      yield 'world';
      return 'ending';
    }
    
    var hw = helloWorldGenerator();

**调用 `Generator` 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是遍历器对象**

**下一步，必须调用遍历器对象的`next`方法，使得指针移向下一个状态。每次调用`next`方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个`yield`表达式（或`return`语句）为止，如果没有再遇到新的`yield`表达式，就一直运行到函数结束。换言之，`Generator` 函数是分段执行的，`yield`表达式是暂停执行的标记，而`next`方法可以恢复执行。**

hw.next()
    // { value: 'hello', done: false }
    
    hw.next()
    // { value: 'world', done: false }
    
    hw.next()
    // { value: 'ending', done: true }
    
    hw.next()
    // { value: undefined, done: true }

## yield表达式 ##

**`yield`表达式后面的表达式，只有当调用`next`方法、内部指针指向该语句时才会执行，因此等于为 JavaScript 提供了手动的“惰性求值”（Lazy Evaluation）的语法功能。**

function* gen() { 
      yield  123 + 456;  //后面的表达式只有当调用next方法时，才会计算求值
    }

**`yield`表达式只能用在 `Generator` 函数里面，用在其他地方都会报错。另外，`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
    }

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

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

## 与Iterator接口的关系 ##

**由于 `Generator` 函数就是遍历器生成函数，因此可以把 `Generator` 赋值给对象的`Symbol.iterator`属性，从而使得该对象具有 `Iterator` 接口。**

var myIterable = {};
    myIterable[Symbol.iterator] = function* () { 
      yield 1;
      yield 2;
      yield 3;
    };
    
    [...myIterable] // [1, 2, 3]

**`Generator` 函数执行后，返回一个遍历器对象。该对象本身也具有`Symbol.iterator`属性，执行后返回自身。**

function* gen(){ 
      // some code
    }
    
    var g = gen();
    
    g[Symbol.iterator]() === g
    // true

## next方法的参数 ##

**`yield`表达式本身没有返回值，或者说总是返回undefined。`next`方法可以带一个参数，该参数就会被当作上一个`yield`表达式的返回值。**

function* f() { 
      for(var i = 0; true; i++) {
        var reset = yield i;     //reset为yield表达式的返回值
        if(reset) { i = -1; }    //当reset不为undefined时，i赋值为-1
      }
    }
    
    var g = f();
    
    g.next() // { value: 0, done: false }
    g.next() // { value: 1, done: false }
    g.next(true) // { value: 0, done: false }

**这个功能有很重要的语法意义。`Generator` 函数从暂停状态到恢复运行，它的上下文状态（context）是不变的。通过`next`方法的参数，就有办法在 `Generator` 函数开始运行之后，继续向函数体内部注入值。**

**注意，由于`next`方法的参数表示上一个`yield`表达式的返回值，所以在第一次使用`next`方法时，传递参数是无效的。要想在第一次调用时就能输入值，可以在 `Generator` 函数外面再包一层。**

上述代码在wrapper函数中，首先调用一次`next`方法，再返回遍历器对象。当用户自己调用`next`方法时，看起来就像是第一次调用，但实际上，这是第二次调用`next`方法。

## for…of 循环 ##

**`for...of`循环可以自动遍历 Generator 函数时生成的`Iterator`对象，且此时不再需要调用next方法，但是遍历不包含`return`语句的返回值**

function* foo() { 
      yield 1;
      yield 2;
      yield 3;
      yield 4;
      yield 5;
      return 6;
    }
    
    for (let v of foo()) {
      console.log(v);
    }
    // 1 2 3 4 5

**除了`for...of`循环以外，扩展运算符（`...`）、解构赋值和`Array.from`方法内部调用的，都是遍历器接口。这意味着，它们都可以将 `Generator` 函数返回的 `Iterator` 对象，作为参数。**

function* numbers () { 
      yield 1
      yield 2
      return 3
      yield 4
    }
    
    // 扩展运算符
    [...numbers()] // [1, 2]
    
    // Array.from 方法
    Array.from(numbers()) // [1, 2]
    
    // 解构赋值
    let [x, y] = numbers();
    x // 1
    y // 2
    
    // for...of 循环
    for (let n of numbers()) {
      console.log(n)
    }
    // 1
    // 2

## Generator.prototype.throw() 和 Generator.prototype.return() ##

**`Generator` 函数返回的遍历器对象，都有一个`throw`方法，可以在函数体外抛出错误，然后在 `Generator` 函数体内捕获。`throw`方法可以接受一个参数，建议抛出`Error`对象的实例。**

**遍历器对象的`throw`方法与全局的`throw`命令相比，前者抛出的错误可以被`Generator`函数内部的`catch`语句（优先捕获）和函数外部的`catch`语句捕获，后者抛出的错误只能被函数体外的`catch`语句捕获**

**如果 `Generator` 函数内部和外部，都没有部署`try...catch`代码块，那么throw方法将导致程序报错，直接中断执行。**

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

**`Generator` 函数体外抛出的错误，可以在函数体内捕获；反过来，`Generator` 函数体内抛出的错误，也可以被函数体外的`catch`捕获。一旦 `Generator` 执行过程中抛出错误，且没有被内部捕获，就不会再执行下去了。如果此后还调用next方法，将返回一个value属性等于`undefined`、`done`属性等于true的对象，即 JavaScript 引擎认为这个 Generator 已经运行结束了。**

function* foo() { 
      var x = yield 3;
      var y = x.toUpperCase();  //报错
      yield y;
    }
    
    var it = foo();
    
    it.next(); // { value:3, done:false }
    
    try {
      it.next(42);
    } catch (err) {
      console.log(err);   //捕获
    }

**`Generator`函数返回的遍历器对象，还有一个`return`方法，可以返回给定的值，并且终结遍历 `Generator` 函数。如果不提供参数，则返回undefined**

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`函数内部有`try...finally`代码块，那么`return`方法会推迟到`finally`代码块执行完再执行。**

function* numbers () { 
      yield 1;
      try {
        yield 2;
        yield 3;
      } finally {
        yield 4;
        yield 5;
      }
      yield 6;
    }
    var g = numbers();
    g.next() // { value: 1, done: false }
    g.next() // { value: 2, done: false }
    g.return(7) // { value: 4, done: false }
    g.next() // { value: 5, done: false }
    g.next() // { value: 7, done: true }

**比较遍历器对象的`next()`、`throw()`和`return()`方法，它们的作用都是让`Generator`函数恢复执行，并且使用不同的语句替换`yield`表达式。`next()`是将`yield`表达式替换成一个值，`throw()`是将`yield`表达式替换成一个`throw`语句，而`return()`是将`yield`表达式替换成一个`return`语句。**

## yield\* 表达式 ##

**如果在 `Generator` 函数内部，调用另一个 `Generator` 函数，默认情况下是没有效果的。而`yield*`表达式，用来在一个 `Generator` 函数里面执行另一个 `Generator` 函数。`yield*`后面跟的是一个遍历器对象**

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"

**如果`yield*`后面跟着数据结构，只要该数据结构具有Iterator接口，就可以被`yield*`遍历**

function* gen(){
      yield* ["a", "b", "c"];
    }
    
    gen().next() // { value:"a", done:false }

let read = (function* () { 
      yield 'hello';
      yield* 'hello';
    })();
    
    read.next().value // "hello"
    read.next().value // "h"

**如果被代理的 `Generator` 函数有`return`语句，那么就可以向代理它的 `Generator` 函数返回数据。**

function* genFuncWithReturn() { 
      yield 'a';
      yield 'b';
      return 'The result';
    }
    function* logReturned(genObj) { 
      let result = yield* genObj;
      console.log(result);
    }
    
    [...logReturned(genFuncWithReturn())]
    // The result
    // 值为 [ 'a', 'b' ]

上面代码中，存在两次遍历。第一次是扩展运算符遍历函数`logReturned`返回的遍历器对象，第二次是`yield*`语句遍历函数g`enFuncWithReturn`返回的遍历器对象。`genFuncWithReturn`的`return`语句的返回值The result，会返回给函数`logReturned`内部的`result`变量，因此会有终端输出

使用`yield*`语句完全遍历二叉树

// 下面是二叉树的构造函数，
    // 三个参数分别是左树、当前节点和右树
    function Tree(left, label, right) { 
      this.left = left;
      this.label = label;
      this.right = right;
    }
    
    // 下面是中序（inorder）遍历函数。
    // 由于返回的是一个遍历器，所以要用generator函数。
    // 函数体内采用递归算法，所以左树和右树要用yield*遍历
    function* inorder(t) { 
      if (t) {
        yield* inorder(t.left);
        yield t.label;
        yield* inorder(t.right);
      }
    }
    
    // 下面递归生成二叉树
    function make(array) { 
      // 判断是否为叶节点
      if (array.length == 1) return new Tree(null, array[0], null);
      return new Tree(make(array[0]), array[1], make(array[2])); 
    }
    let tree = make([[['a'], 'b', ['c']], 'd', [['e'], 'f', ['g']]]);
    
    // 遍历二叉树
    var result = [];
    for (let node of inorder(tree)) {
      result.push(node);
    }
    
    result
    // ['a', 'b', 'c', 'd', 'e', 'f', 'g']

## 作为对象属性的 Generator 函数 ##

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

let obj = {
      * myGeneratorMethod() {
        ···
      }
    };

## Generator 函数的 this ##

**`Generator`函数总是返回一个遍历器，ES6规定这个遍历器是`Generator`函数的实例，也继承了 `Generator` 函数的`prototype`对象上的方法。**

**如果把`Generator`当作普通的构造函数，并不会生效，因为其返回的总是遍历器对象，而不是`this`对象。`Generator` 函数也不能跟`new`命令一起用，会报错**

function* g() { 
      this.a = 11;
    }
    
    let obj = g();
    obj.next();
    obj.a // undefined

**将`this`对象绑定至`Generator` 函数的`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

**在外面包一层普通函数，即可使用`new`命令**

function* F() { 
      this.a = 1;
      yield this.b = 2;
      yield this.c = 3;
    }
    
    function F_constructor(){ 
        return F.call(F.prototype)
    }
    
    f = new F_constructor();
    
    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 与上下文 ##

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

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

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

## 应用 ##

（1）**异步操作的同步化表示**  
`Generator` 函数的暂停执行的效果，意味着可以把异步操作写在`yield`表达式里面，等到调用next方法时再往后执行。这实际上等同于不需要写回调函数了，因为异步操作的后续操作可以放在yield表达式下面，反正要等到调用`next`方法时再执行。所以，`Generator`函数的一个重要实际意义就是用来处理异步操作，改写回调函数。  
下面是通过 `Generator` 函数部署 Ajax 操作

function* main() { 
      var result = yield request("http://some.url");  //等待返回response
      var resp = JSON.parse(result);
        console.log(resp.value);
    }
    
    function request(url) { 
      makeAjaxCall(url, function(response){ 
        it.next(response);   //通过next方法传递response
      });
    }
    
    var it = main();
    it.next();

(2)**控制流管理**  
利用`for...of`循环会自动依次执行`yield`命令的特性，提供一种更一般的控制流管理的方法。

let steps = [step1Func, step2Func, step3Func];
    
    function* iterateSteps(steps){ 
      for (var i=0; i< steps.length; i++){ var step = steps[i]; yield step(); }
    }

将任务分解成步骤之后，还可以使用`yield*`将项目分解成多个依次执行的任务

let jobs = [job1, job2, job3];
    
    function* iterateJobs(jobs){ 
      for (var i=0; i< jobs.length; i++){ var job = jobs[i]; yield* iterateSteps(job.steps); }
    }

最后，就可以用`for...of`循环一次性依次执行所有任务的所有步骤

for (var step of iterateJobs(jobs)){
      console.log(step.id);
    }

（3）**部署`Iterator`接口**  
利用 `Generator` 函数，可以在任意对象上部署 `Iterator` 接口。

（4）**作为数据结构**  
`Generator` 可以看作是数据结构，更确切地说，可以看作是一个数组结构，因为 `Generator` 函数可以返回一系列的值，这意味着它可以对任意表达式，提供类似数组的接口。

function* doStuff() { 
      yield fs.readFile.bind(null, 'hello.txt');
      yield fs.readFile.bind(null, 'world.txt');
      yield fs.readFile.bind(null, 'and-such.txt');
    }
    
    for (task of doStuff()) {
      // task是一个函数，可以像回调函数那样使用它
    }