Generator-异步方案

女爷i 2024-04-18 18:13 68阅读 0赞

# 简介 #

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。

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

### 跟普通函数的区别 ###

*  `function`关键字与函数名之间有一个星号；
 *  函数体内部使用`yield`表达式，定义不同的内部状态。
 *  `Generator`函数不能跟new一起使用，会报错。

定义一个普通函数和定义一个Generator惰性函数

// 定义一个普通函数
    function auto(){
        console.log('函数执行')
    }
    auto();//这是一个普通函数函数名字加上()执行函数内部的代码
    
    
    // Generator函数的*号当前函数变懒了
    function* auto(){//这种形式的函数叫做Generator函数
        //一遍情况下*是紧跟function关键词后面写的
        //加了*号让这个函数变懒了，即使加上函数名字启动依然没有执行内部的代码
        console.log('函数执行');
        console.log('函数执行');
        console.log('函数执行');
    }		
    var result = auto();
    
    
    function* helloWorldGenerator() {
      yield 'hello';
      yield 'world';
      return 'ending';
    }
    
    var hw = helloWorldGenerator();

上面代码定义了一个 Generator 函数`helloWorldGenerator`，它内部有两个`yield`表达式（`hello`和`world`），即该函数有三个状态：`hello`，`world` 和 `return` 语句（结束执行）。

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

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

比如我们在控制台执行一遍

> hw.next()
> 
>

就会有以下的结果

![2019091014470316.jpg][]

ES6 没有规定，`function`关键字与函数名之间的星号，写在哪个位置。这导致下面的写法都能通过：

function * foo(x, y) { ··· }
    function *foo(x, y) { ··· }
    function* foo(x, y) { ··· }
    function*foo(x, y) { ··· }

# yield 表达式 #

由于 Generator 函数返回的遍历器对象，只有调用`next`方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。`yield`表达式就是暂停标志。

**遍历器对象的`next`方法的运行逻辑如下：**

1.遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。

2.下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。

3.如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。

4.如果该函数没有return语句，则返回的对象的value属性值为undefined。

**`yield`表达式与`return`语句既有相似之处**

都能返回紧跟在语句后面的那个表达式的值。

**不同之处**

每次遇到yield，函数暂停执行，下一次再从该位置继续向后执行，而return语句不具备位置记忆的功能。一个函数里面，只能执行一次（或者说一个）return语句，但是可以执行多次（或者说多个）yield表达式。正常函数只能返回一个值，因为只能执行一次return；Generator 函数可以返回一系列的值，因为可以有任意多个yield。

**注意：**

`yield`表达式只能用在 Generator 函数里面，用在其他地方都会报错。

另外，`yield`表达式如果用在另一个表达式之中，必须放在圆括号里面。

例如：

console.log('Hello' + yield 123); // SyntaxError
    console.log('Hello' + (yield 123)); // OK

### next 方法的参数 ###

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

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 }

大概就理解到这里了~

[2019091014470316.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/61e18485a6954e58a4df6024a7d2ece0.jpg