> 作者：麥樂
>
> 來源：[恆生LIGHT雲社群](https://developer.hs.net/thread/1905)

# Generator函式基本用法

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

Generator函式呼叫後生成的就是一個迭代器物件，可以透過呼叫迭代器的next方法，控制函式內部程式碼的執行。

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

Generator函式遇到yield，可以在生成器函式內部暫停程式碼的執行使其掛起。在可迭代物件上呼叫next()方法可以使程式碼從暫停的位置開始繼續往下執行。

先來了解一下什麼是可迭代物件？

# 可迭代物件

要成為**可迭代** 物件， 一個物件必須實現 `<strong>@@iterator</strong>` 方法。這意味著物件（或者它[原型鏈](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain)上的某個物件）必須有一個鍵為 `@@iterator` 的屬性，可透過常量 [`Symbol.iterator`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator) 訪問該屬性：

[ [`Symbol.iterator`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator)] 一個無引數的函式，其返回值為一個符合[迭代器協議](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#%E8%BF%AD%E4%BB%A3%E5%99%A8%E5%8D%8F%E8%AE%AE)的物件。

```js
let someString = "hi";
typeof someString[Symbol.iterator];   
let iterator = someString[Symbol.iterator]();
iterator + "";                               // "[object String Iterator]"
 
iterator.next();         // { value: "h", done: false }
iterator.next();         // { value: "i", done: false }
iterator.next();         // { value: undefined, done: true }
```

再來看一下，掛起是怎麼回？有一個新的名詞“協程”。

# 什麼是協程？

**協程**（Coroutines）是一種比執行緒更加輕量級的存在，正如一個程式可以擁有多個執行緒一樣，一個執行緒可以擁有多個協程。

協程不是被作業系統核心所管理的，而是完全由程式所控制，也就是在使用者態執行。這樣帶來的好處是效能大幅度的提升，因為不會像執行緒切換那樣消耗資源。

協程不是程式也不是執行緒，而是一個特殊的函式，這個函式可以在某個地方掛起，並且可以重新在掛起處外繼續執行。所以說，協程與程式、執行緒相比並不是一個維度的概念。

# Generator 函式原理

**Generator 函式**是協程在 ES6 的實現，最大特點就是可以交出函式的執行權（即暫停執行）。

總結下來就是：

* 一個執行緒存在多個協程
* Generator函式是協程在ES6的實現
* Yield掛起協程（交給其它協程），next喚起協程

講到這裡，應該會對Generator函式有一個重新的認識吧。在實際的開發中，直接使用Generator函式的場景並不常見，因為它只能透過手動呼叫next方法實現函式內部程式碼的順序執行。如果想象很好是使用它，可以為Generator函式實現一個自動執行神器。

# 自動執行的Generator函式

可以根據g.next()的返回值{value: '', done: false}中done的值讓Generator函式遞迴自執行：

```js
 function run(generator) {
            var g = generator();

var next = function() {
                var obj = g.next()
                console.log(obj)
                if(!obj.done) {
                    next()
                }
            }
            next()
        }
        run(helloWorldGenerator)
```

這樣寫能實現自執行功能，但是 不能保證執行順序。模擬兩個非同步請求：

```js
    function sleep1() {
            return new Promise((resolve) => {
                setTimeout(() => {
                    console.log('sleep1')
                    resolve(1)
                }, 1000)
            })
        }
        function sleep2() {
            return new Promise((resolve) => {
                setTimeout(() => {
                    console.log('sleep2')
                    resolve(2)
                }, 1000)
            })
        }
```

修改函式

```js
function* helloWorldGenerator() {
            yield sleep1();
            console.log(1);
            yield sleep2();
            console.log(2);
        }
```

執行 `run(helloWorldGenerator)`看一下列印順序：

![41D1643C-3546-4CDD-84E6-8FAFD86B99B9.png](https://developer.hs.net/storage/attachments/2022/01/09/qJfhKI8nwfzb7goYgKctFrQ3t25TvzmLSlIT57pW_thumb.png "4720")

非同步函式還是在同步程式碼執行完以後執行的，如果想要實現非同步程式碼也能按照順序執行，可以對程式碼進一步最佳化：

```js
        function run(generator) {
            var g = generator();

var next = function() {
                var obj = g.next();
                console.log(obj)
                if(obj.done) return;
                // 如果yield後面返回值不是promise，可以使用Promise.resolve包裹一下，防止報錯
                Promise.resolve(obj.value).then(() => {next()})
            }
            next()
        }
```

![1.png](https://developer.hs.net/storage/attachments/2022/01/09/p8xxV5XkDE1ejX6DGaqPhXXpZaLdOz9fytDloOcx_thumb.png "4721")

如果說sleep1是一個網路請求的話，在yield後面就可以拿到請求返回的資料，看起來像是一種更優雅的非同步問題解決方案。

如果想要拿到sleep函式resolve的值，也是可以實現的。

```
// 修改函式 變數接收yield語句返回結果
function* helloWorldGenerator() {
            var a = yield sleep1();
            console.log(a);
            var b = yield sleep2();
            console.log(b);
        }
// g.next(v); 傳遞結果值
      function run(generator) {
            var g = generator();

var next = function(v) {
                var obj = g.next(v);
                console.log(obj)
                if(obj.done) return;
                // 如果yield後面返回值不是promise，可以使用Promise.resolve包裹一下，防止報錯
                Promise.resolve(obj.value).then((v) => {next(v)})
            }
            next()
        }
```

你會看到和上面一樣的列印結果。

仔細看上面實現方式跟async await很相似，實際上這就是async await的原理。

# async await

async await本質上就是結合promise實現的一個自執行Generator函式。`將 Generator 函式的星號（*）替換成async，將yield替換成await，僅此而已`。

更詳細的程式碼如下，感興趣的同學可以深入瞭解一下：

```js
 // async函式就是將 Generator 函式的星號（*）替換成async，將yield替換成await，僅此而已
            // async函式返回一個 Promise 物件，可以使用then方法新增回撥函式。當函式執行的時候，一旦遇到await就會先返回，等到非同步操作完成，再接著執行函式體內後面的語句
            // Generator 函式的執行必須靠執行器，所以才有了co模組，而async函式自帶執行器和普通函式一樣執行
            // async函式對 Generator 函式的改進:
            /*
            （1）內建執行器
            （2）更好的語義
            （3）更廣的適用性
            （4）返回值是 Promise
            */
 
  
            // async 函式的實現原理，就是將 Generator 函式和自動執行器，包裝在一個函式里。
            async function fn(args) {
                // ...
            }
            // 等同於 裡面的await 換成 yield
            function fn(args) {
                return spawn(function*() {
                    // ...
                });
            }
  
            function spawn(genF) {
                return new Promise(function(resolve, reject) {
                    const gen = genF();
                    function step(nextF) {
                        let next;
                        try {
                            next = nextF();
                        } catch (e) {
                            return reject(e);
                        }
                        if (next.done) {
                            return resolve(next.value); // 這也是為什麼 不使用try catch的話，異常非同步請求後面的程式碼不再執行的原因，從這裡不再繼續呼叫nex()方法了。
                        }
                        Promise.resolve(next.value).then(function(v) {
                            step(function() {
                                return gen.next(v);
                            });
                        }, function(e) {
                            step(function() {
                                return gen.throw(e); // 這裡可以解釋為什麼async 函式需要使用try catch來捕獲異常，生成器函式的throw，會讓程式碼到catch裡面
                            });
                        });
                    }
                    step(function() {
                        return gen.next(undefined);
                    });
                });
            }
```

***

想向技術大佬們多多取經？開發中遇到的問題何處探討？如何獲取金融科技海量資源？

[恆生LIGHT雲社群](https://developer.hs.net/)，由恆生電子搭建的金融科技專業社群平臺，分享實用技術乾貨、資源資料、金融科技行業趨勢，擁抱所有金融開發者。

掃描下方小程式二維碼，加入我們！

![](https://developer.hs.net/storage/attachments/2021/12/20/vzjJlveZdvxcz6rUjIBaPMbRK36iL8jCjtMU5h97.png)

一步一步理解Generator函式的原理

相關文章