前端面试系列-JavaScript-理解generator及实现原理

逃离我推掉我的手 2022-11-13 01:51 176阅读 0赞

### 文章目录 ###

*  一、generator
 *  二、使用案例
 *   *  1.给普通对象添加遍历器
     *  2.将ajax请求转成类似的 let a = ajax()的同步赋值形式
     *  3.实现状态机
     *  4.实现轮询
     *  5.异步操作的同步化表达（处理异步操作，改写回调函数）
     *  6.通过Generator函数部署Ajax操作
     *  7.通过 Generator 函数逐行读取文本文件。
 *  三、实现原理

# 一、generator #

*  generator:可以将生成器视为可以暂停和恢复的进程（代码段),代码在执行的过程中可以主要交出控制权
 *  genearator 语法: function\* 是一个新的关键字用于生成器函数（也有生成器方法）。  
    yield是generator可以自行暂停的运算符。此外，generator还可以通过yield接收输入和发送输出。

function* example() {
     yield 1;
     yield 2;
     yield 3;
    }
    var iter=example();
    iter.next();//{value:1，done:false}
    iter.next();//{value:2，done:false}
    iter.next();//{value:3，done:false}
    iter.next();//{value:undefined，done:true}

Generator函数有多个返回值状态（每个yield关键字后跟一个状态），只有调用next()函数时才会返回值，每调用一次next()函数就返回一个对象\{value: xxx, done: false\}，直到没有对应的yield了就返回done状态为true的对象\{value: undefined, done: true\}。

与普通函数相比二者有如下区别:

*  普通函数使用 function 声明，生成器函数用 function\*声明
 *  普通函数使用 return 返回值，生成器函数使用 yield 返回值
 *  普通函数是 run to completion 模式，即普通函数开始执行后，会一直执行到该函数所有语句完成，在此期间别的代码语句是不会被执行的；生成器函数是 run-pause-run 模式，即生成器函数可以在函数运行中被暂停一次或多次，并且在后面再恢复执行，在**暂停期间允许其他代码语句被执行**

# 二、使用案例 #

## 1.给普通对象添加遍历器 ##

let obj = {
        name:'zhangsan',
        age:18,
        sex:'man'
    }
    for(var value of obj){
      console.log(value);//报错 obj is not iterable
    }
    console.log([...obj]);//报错 obj is not iterable

一个普通的对象obj默认是没有遍历器的，意味着不能使用for…of遍历，且不能使用…操作符解构。  
可见都是报错obj is not iterable，我们通过Generator函数给其添加遍历器。

## 2.将ajax请求转成类似的 let a = ajax()的同步赋值形式 ##

经常碰见一个业务内多个请求串联依赖，即后者依赖前者的请求结果，目前只能有3种做法，

*  回调函数嵌套
 *  使用promise的.then进行链式调用
 *  但现在我们学习了Generator函数后可以有第三种选择  
    将前一个网络请求的返回值赋值给一个变量，在下一个请求中使用  
    即以下形式：

let a = 请求1(){}
    let b = 请求2(a){}

以上代码let a = yield ajaxMy(‘get’,‘www.baidu.com’,10,k);类似于将一个网络请求的返回值赋值给了a变量，可在下一步请求yield ajaxMy(‘get’,‘www.baidu.com’,a,k);中作为参数使用，这样一来编写业务逻辑就会清晰很多。

## 3.实现状态机 ##

let state = function* (){
        while(1){
            yield 'block';
            yield 'none';
        }
    }
    let displayClass = state();
    console.log(displayClass.next().value);//block
    console.log(displayClass.next().value);//none
    console.log(displayClass.next().value);//block
    console.log(displayClass.next().value);//none

每调用一次next,value值会在block,none两值之中来回切换，且不会被篡改。

## 4.实现轮询 ##

//请求方法，返回值包括状态码和数据
    let requestSingFn = function* (){
        yield new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve({code:304,data:{username:'zhangsan'}});
            },300)
        })
    }
    //轮询函数 只有当code为200时才会停止发送请求
    let requestFn = function(){
        let req = requestSingFn();
        let stat = req.next();
        stat.value.then(function(response){
            if(response.code!=200){
                setTimeout(function(){
                    console.log('重新发送请求');
                    requestFn();
                },1000);
            }else{
                console.log(response.data);
            }
        })
    }
    requestFn();
    //重新发送
    //重新发送
    //重新发送
    //重新发送
    //重新发送
    。。。。

只有当code的状态变为200成功响应才会停止发送请求，否则每个1300毫秒发送一次请求

## 5.异步操作的同步化表达（处理异步操作，改写回调函数） ##

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

function* loadUI() {
      showLoadingScreen();
      yield loadUIDataAsynchronously();
      hideLoadingScreen();
    }
    var loader = loadUI();
    // 加载UI
    loader.next()
    
    // 卸载UI
    loader.next()

上面代码中，第一次调用loadUI函数时，该函数不会执行，仅返回一个遍历器。下一次对该遍历器调用next方法，则会显示Loading界面，并且异步加载数据。等到数据加载完成，再一次使用next方法，则会隐藏Loading界面。可以看到，这种写法的好处是所有Loading界面的逻辑，都被封装在一个函数，按部就班非常清晰。

## 6.通过Generator函数部署Ajax操作 ##

Ajax是典型的异步操作，通过Generator函数部署Ajax操作，可以用同步的方式表达。

function* main() {
      var result = yield request("http://some.url");
      var resp = JSON.parse(result);
        console.log(resp.value);
    }
    
    function request(url) {
      makeAjaxCall(url, function(response){
        it.next(response);
      });
    }
    
    var it = main();
    it.next();

上面代码的main函数，就是通过Ajax操作获取数据。可以看到，除了多了一个·yield，它几乎与同步操作的写法完全一样。注意，makeAjaxCall函数中的next方法，必须加上response参数，因为yield表达式，本身是没有值的，总是等于undefined\`。

## 7.通过 Generator 函数逐行读取文本文件。 ##

function* numbers() {
      let file = new FileReader("numbers.txt");
      try {
        while(!file.eof) {
          yield parseInt(file.readLine(), 10);
        }
      } finally {
        file.close();
      }
    }

# 三、实现原理 #

先简单回顾一下JS的运行规则：

1.  JS是单线程的，只有一个主线程
2.  函数内的代码从上到下顺序执行，遇到被调用的函数先进入被调用函数执行，待完成后继续执行
3.  遇到异步事件，浏览器另开一个线程，主线程继续执行，待结果返回后，执行回调函数

那么，Generator函数是如何进行异步化为同步操作的呢？ 实质上很简单，\* 和 yield 是一个标识符，在浏览器进行软编译的时候，遇到这两个符号，自动进行了代码转换：

// 异步函数
    function asy() {
        $.ajax({
            url: 'test.txt',
            dataType: 'text',
            success() {
                console.log("我是异步代码");
            }
        })
    }
    
    function* gener() {
        let asy = yield asy();
        yield console.log("我是同步代码");
    }
    let it = gener().next();
    it.then(function() {
        it.next();
    })
    // 我是异步代码
    // 我是同步代码

浏览器编译之后:

整个过程类似于，浏览器遇到标识符 \* 之后，就明白这个函数是生成器函数，一旦遇到 yield 标识符，就会将以后的函数放入此异步函数之内，待异步返回结果后再进行执行。

更深一步，从内存上来讲：  
普通函数在被调用时，JS 引擎会创建一个栈帧，在里面准备好局部变量、函数参数、临时值、代码执行的位置（也就是说这个函数的第一行对应到代码区里的第几行机器码），在当前栈帧里设置好返回位置，然后将新帧压入栈顶。待函数执行结束后，这个栈帧将被弹出栈然后销毁，返回值会被传给上一个栈帧。

当执行到 yield 语句时，Generator 的栈帧同样会被弹出栈外，但Generator在这里耍了个花招——它在堆里保存了栈帧的引用（或拷贝）！这样当 it.next 方法被调用时，JS引擎便不会重新创建一个栈帧，而是把堆里的栈帧直接入栈。因为栈帧里保存了函数执行所需的全部上下文以及当前执行的位置，所以当这一切都被恢复如初之时，就好像程序从原本暂停的地方继续向前执行了。  
而因为每次 yield 和 it.next 都对应一次出栈和入栈，所以可以直接利用已有的栈机制，实现值的传出和传入。

[参考：https://juejin.cn/post/6844903652445044749][https_juejin.cn_post_6844903652445044749]

[本文链接:https://blog.csdn.net/qq\_39903567/article/details/115188020][https_blog.csdn.net_qq_39903567_article_details_115188020]

[https_juejin.cn_post_6844903652445044749]: https://juejin.cn/post/6844903652445044749
[https_blog.csdn.net_qq_39903567_article_details_115188020]: https://blog.csdn.net/qq_39903567/article/details/115188020