ES6---Generator函数

最新推荐文章于 2024-09-21 20:29:56 发布

南初️

最新推荐文章于 2024-09-21 20:29:56 发布

阅读量863

点赞数 4

分类专栏： ES6 文章标签： javascript 前端开发语言 es6

本文链接：https://blog.csdn.net/qq_45806781/article/details/122149835

版权

ES6 专栏收录该内容

27 篇文章 7 订阅

订阅专栏

ES6---Generator函数

一、简介
二、yield 表达式
三、next 方法的参数
四、for...of 循环
五、Generator函数异步操作的同步化表达
六、Generator.prototype.throw()---函数体外抛出错误
七、Generator.prototype.return()---返回给定的值
八、next()、throw()、return() 的共同点
1. next()是将yield表达式替换成一个值
2. throw()是将yield表达式替换成一个throw语句
3. return()是将yield表达式替换成一个return语句

九、yield* 表达式---Generator函数嵌套
十、Generator 函数的this
十一、Thunk 函数

一、简介

Generator函数是 ES6 提供的一种异步编程解决方案。
Generator函数有多种理解角度。语法上，首先可以把它理解成，Generator函数是一个状态机，封装了多个内部状态。
执行Generator函数会返回一个遍历器对象，也就是说，Generator函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。
形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。
    function* method(){
        yield 1+1;
        yield 2+2;
        yield 3+3;
        yield 4+4;
        return 10;
    }
    //执行该函数
    let f=method();//执行之后返回遍历器
    //下面是一个遍历器的使用
    console.log(f.next());
    console.log(f.next());
    console.log(f.next());
    console.log(f.next());
    console.log(f.next());
Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象。下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。换言之，Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。
总结一下，调用 Generator 函数，返回一个遍历器对象，代表 Generator 函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield表达式后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。

二、yield 表达式

由于 Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。
遍历器对象的next方法的运行逻辑如下。
（1）遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。
（2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。
（3）如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。
（4）如果该函数没有return语句，则返回的对象的value属性值为undefined。
需要注意的是，yield表达式后面的表达式，只有当调用next方法、内部指针指向该语句时才会执行，因此等于为 JavaScript 提供了手动的“惰性求值”的语法功能。
yield表达式与return语句既有相似之处，也有区别。相似之处在于，都能返回紧跟在语句后面的那个表达式的值。区别在于每次遇到yield，函数暂停执行，下一次再从该位置继续向后执行，而return语句不具备位置记忆的功能。一个函数里面，只能执行一次（或者说一个）return语句，但是可以执行多次（或者说多个）yield表达式。正常函数只能返回一个值，因为只能执行一次return；Generator 函数可以返回一系列的值，因为可以有任意多个yield。从另一个角度看，也可以说 Generator 生成了一系列的值。
Generator 函数可以不用yield表达式，这时就变成了一个单纯的暂缓执行函数。
    function* f() {
        console.log('执行了！')
    }
    var generator = f();
    setTimeout(function () {
        generator.next()
    }, 2000);
函数f如果是普通函数，在为变量generator赋值时就会执行。但是，函数f是一个 Generator 函数，就变成只有调用next方法时，函数f才会执行。
注意，yield表达式只能用在 Generator 函数里面，用在其他地方都会报错。

三、next 方法的参数

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

    function* method(){
        let x=yield 1+2;
        console.log(x);//3
        let y=yield 3+x;
        console.log(y);//7
        return y+10;
    }
    let met=method();
    console.log(met.next());//{value: 3, done: false}
    console.log(met.next(3));//{value: 6, done: false}
    console.log(met.next(7));//{value: 17, done: true}

    //yield表达式写在一行，由内向外执行
    function* fun(){
        let x=yield 5+(yield 1+2);
        return x;
    }
    let xf=fun();
    console.log(xf.next());//{value: 3, done: false}
    console.log(xf.next(10));//{value: 15, done: false}
    console.log(xf.next(2));//{value: 2, done: true}

    function* fm(){
        console.log("start");
        console.log(1, `${yield}`);
        console.log(2, `${yield}`);
        console.log("end");
    }
    let f=fm();
    console.log(f.next());
    console.log(f.next('a'));
    //1 "a"
    console.log(f.next('b'));
    //1 "b"

四、for…of 循环

for…of循环可以自动遍历 Generator 函数运行时生成的Iterator对象，且此时不再需要调用next方法。
    function* foo(){
        yield 1;
        yield 2;
        yield 3;
        yield 4;
        yield 5;
        return 6;
    }
    for(let i of foo()){
        console.log(i);//1 2 3 4 5
    }
上面使用for…of循环，依次显示 5 个yield表达式的值。注意，一旦next方法的返回对象的done属性为true，for…of循环就会中止，且不包含该返回对象，所以上面代码的return语句返回的6，不包括在for…of循环之中。
利用 Generator 函数和for…of循环，实现斐波那契数列的例子。
    function* fibo(){
        let [prev,cur]=[0,1];
        for(;;){
            yield cur;
            [prev,cur]=[cur,prev+cur];
        }
    }
    for(let n of fibo()){
        if(n>50)
            break;
        console.log(n);//1 1 2 3 5 8 13 21 34
    }
利用for…of循环，可以写出遍历任意对象（object）的方法。原生的 JavaScript 对象没有遍历接口，无法使用for…of循环，通过 Generator 函数为它加上这个接口，就可以用了。
除了for…of循环以外，扩展运算符（…）、解构赋值和Array.from方法内部调用的，都是遍历器接口。这意味着，它们都可以将 Generator 函数返回的 Iterator 对象，作为参数。

五、Generator函数异步操作的同步化表达

Generator 可以暂停函数执行，返回任意表达式的值。这种特点使得 Generator 有多种应用场景。
Generator 函数的暂停执行的效果，意味着可以把异步操作写在yield表达式里面，等到调用next方法时再往后执行。这实际上等同于不需要写回调函数了，因为异步操作的后续操作可以放在yield表达式下面，反正要等到调用next方法时再执行。所以，Generator 函数的一个重要实际意义就是用来处理异步操作，改写回调函数。
Ajax 是典型的异步操作，通过 Generator 函数部署 Ajax 操作，可以用同步的方式表达。
    function Ajax(method,url,data,callback){
        var http;
        if(window.XMLHttpRequest){
            http=new XMLHttpRequest();
        }
        else{
            http=new ActiveXObject("Microsoft.XMLHTTP");
        }
        if(method=="get"){
            if(data){
                url+="?";
                url+=data;
            }
            http.open(method,url);
            http.send();
        }
        else{
            http.open(method,url);
            if(data){
                http.send(data);
            }
            http.send();
        }
        http.onreadystatechange=function(){
            if(http.readyState==4&&http.status==200){
                callback(http.response);
            }
        }
    }
    function* requCity(){
        let result=yield Ajax('get','./city.json',null,function(res){
            console.log(aja.next(res));
        })
        let json=JSON.parse(result);
        return json;
    }
    let aja=requCity();
    aja.next();
上面代码的requCity函数，就是通过 Ajax 操作获取数据。可以看到，除了多了一个yield，它几乎与同步操作的写法完全一样。注意，函数中的next方法，必须加上res参数，因为yield表达式，本身是没有值的，总是等于undefined。

六、Generator.prototype.throw()—函数体外抛出错误

a. Generator 函数返回的遍历器对象，都有一个throw方法，可以在函数体外抛出错误，然后在 Generator 函数体内捕获。
    var g=function* (){
        try{
            yield;
        }
        catch(e){
            console.log('内部捕获', e);
        }
    };
    var i=g();
    i.next();
    try{
        i.throw('a');
        i.throw('b');
    }
    catch(e){
        console.log('外部捕获', e);
    }
    //内部捕获 a
    //外部捕获 b
遍历器对象i连续抛出两个错误。第一个错误被 Generator 函数体内的catch语句捕获。i第二次抛出错误，由于 Generator 函数内部的catch语句已经执行过了，不会再捕捉到这个错误了，所以这个错误就被抛出了 Generator 函数体，被函数体外的catch语句捕获。
b. throw方法可以接受一个参数，该参数会被catch语句接收，建议抛出Error对象的实例。
    function* method(){
        try{
            yield 1+2;
            yield 2+3;
            yield 3+4;
        }
        catch(e){
            console.log(e.message);
        }
    }
    let m=method();
    console.log(m.next());//{value: 3, done: false}
    m.throw(new Error("出错了"));
    //出错了
注意，不要混淆遍历器对象的throw方法和全局的throw命令。上面代码的错误，是用遍历器对象的throw方法抛出的，而不是用throw命令抛出的。后者只能被函数体外的catch语句捕获。
    var g=function*(){
    while(true){
        try{
            yield;
        }
        catch(e){
            if(e!='a')
            throw e;
        }
    }
    };
    var i=g();
    i.next();
    try{
        throw new Error('a');
        throw new Error('b');
    }
    catch(e){
        console.log('外部捕获', e);
    }
    //外部捕获 Error: a
之所以只捕获了a，是因为函数体外的catch语句块，捕获了抛出的a错误以后，就不会再继续try代码块里面剩余的语句了。
c. 如果 Generator 函数内部没有部署try…catch代码块，那么throw方法抛出的错误，将被外部try…catch代码块捕获。
    var g=function*(){
        while(true){
            yield;
            console.log('内部捕获', e);
        }
    };
    var i=g();
    i.next();
    try{
        i.throw('a');
        i.throw('b');
    }
    catch(e){
        console.log('外部捕获', e);
    }
    //外部捕获 a
Generator 函数g内部没有部署try…catch代码块，所以抛出的错误直接被外部catch代码块捕获。
d. 如果 Generator 函数内部和外部，都没有部署try…catch代码块，那么程序将报错，直接中断执行。
    var gen = function* gen(){
        yield console.log('hello');
        yield console.log('world');
    }
    var g = gen();
    g.next();
    g.throw();
    //hello
    //Uncaught undefined
g.throw抛出错误以后，没有任何try…catch代码块可以捕获这个错误，导致程序报错，中断执行。
注意：throw方法抛出的错误要被内部捕获，前提是必须至少执行过一次next方法。throw方法被捕获以后，会附带执行下一条yield表达式。也就是说，会附带执行一次next方法。

七、Generator.prototype.return()—返回给定的值

Generator 函数返回的遍历器对象，还有一个return()方法，可以返回给定的值，并且终结遍历 Generator 函数。
    let fun=function*(){
        yield 1;
        yield 2;
        yield 3;
        yield 4;
    }
    let f=fun();
    console.log(f.next());//{value: 1, done: false}
    console.log(f.next());//{value: 2, done: false}
    console.log(f.return('123'));{value: "123", done: true}
    console.log(f.next());//{value: undefined, done: true}
    console.log(f.next());//{value: undefined, done: true}
    console.log(f.next());//{value: undefined, done: true}
遍历器对象f调用return()方法后，返回值的value属性就是return()方法的参数true。并且，Generator 函数的遍历就终止了，返回值的done属性为true，以后再调用next()方法，done属性总是返回true。
如果return()方法调用时，不提供参数，则返回值的value属性为undefined。
    function* method(){
        yield 1;
        yield 2;
        yield 3;
    }
    var m=method();
    console.log(m.next());//{value: 1, done: false}
    console.log(m.return());//{value: undefined, done: true}
如果 Generator 函数内部有try…finally代码块，且正在执行try代码块，那么return()方法会导致立刻进入finally代码块，执行完以后，整个函数才会结束。
    function* numbers(){
        yield 1;
        try{
            yield 2;
            yield 3;
            yield 4;
        }
        finally{
            yield 5;
            yield 6;
        }
        yield 7;
    }
    var g=numbers();
    console.log(g.next());//{value: 1, done: false}
    console.log(g.next());//{value: 2, done: false}
    console.log(g.return(8));//{value: 5, done: false}
    console.log(g.next());//{value: 6, done: false}
    console.log(g.next());//{value: 8, done: true}
调用return()方法后，就开始执行finally代码块，不执行try里面剩下的代码了，然后等到finally代码块执行完，再返回return()方法指定的返回值。

八、next()、throw()、return() 的共同点

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

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

第二个next(1)方法就相当于将yield表达式替换成一个值1。如果next方法没有参数，就相当于替换成undefined。

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

    const g=function* (x,y){
        let result=yield x+y;
        return result;
    };
    const gen=g(1,2);
    console.log(gen.next());//{value: 3, done: false}
    console.log(gen.next(1));//{value: 1, done: true}
    gen.throw(new Error('出错了'));//Uncaught Error: 出错了
    //相当于将 let result = yield x + y替换成 let result = throw(new Error('出错了'));

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

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

九、yield* 表达式—Generator函数嵌套

a. 如果yield表达式后面跟的是一个遍历器对象，需要在yield表达式后面加上星号，表明它返回的是一个遍历器对象。这被称为yield*表达式。
    let a=function* (){
        yield 'a';
        yield 'b';
    }
    let b=function *(){
        yield 1;
        yield* a();
        yield 2;
    }
    let bf=b();
    console.log(bf.next());//{value: 1, done: false}
    console.log(bf.next());//{value: "a", done: false}
    console.log(bf.next());//{value: "b", done: false}
    console.log(bf.next());//{value: 2, done: false}
    console.log(bf.next());//{value: undefined, done: true}
yield* 后面的 Generator 函数（没有return语句时），等同于在 Generator 函数内部，部署一个for…of循环。
yield* 后面的 Generator 函数（没有return语句时），不过是for…of的一种简写形式，完全可以用后者替代前者。反之，在有return语句时，则需要用var value = yield* iterator的形式获取return语句的值。
b. 如果yield*后面跟着一个数组，由于数组原生支持遍历器，因此就会遍历数组成员。
    function* gen(){
        yield* ["a","b","c"];
    }
    let g=gen();
    console.log(g.next());//{value: "a", done: false}
    console.log(g.next());//{value: "b", done: false}
    console.log(g.next());//{value: "c", done: false}
    console.log(g.next());//{value: undefined, done: true}
yield命令后面如果不加星号，返回的是整个数组，加了星号就表示返回的是数组的遍历器对象。
c. 任何数据结构只要有 Iterator 接口，就可以被yield*遍历。
    let read=(function* (){
        yield 'hello';
        yield* 'hello';
    })();
    console.log(read.next());//{value: "hello", done: false}
    console.log(read.next());//{value: "h", done: false}
    console.log(read.next());//{value: "e", done: false}
    console.log(read.next());//{value: "l", done: false}
    console.log(read.next());//{value: "l", done: false}
    console.log(read.next());//{value: "o", done: false}
    console.log(read.next());//{value: undefined, done: true}
yield表达式返回整个字符串，yield* 语句返回单个字符。因为字符串具有 Iterator 接口，所以被yield*遍历。

十、Generator 函数的this

Generator 函数总是返回一个遍历器，ES6 规定这个遍历器是 Generator 函数的实例，也继承了 Generator 函数的prototype对象上的方法。
    function* g(){}
    g.prototype.hello=function(){
        return 'hi';
    };
    let obj=g();
    console.log(obj instanceof g);//true
    console.log(obj.hello());//hi
Generator 函数g返回的遍历器obj，是g的实例，而且继承了g.prototype。但是，如果把g当作普通的构造函数，并不会生效，因为g返回的总是遍历器对象，而不是this对象。
    function* g(){
        this.a=11;
    }
    let obj=g();
    console.log(obj.next());//{value: undefined, done: true}
    console.log(obj.a);//undefined
Generator 函数g在this对象上面添加了一个属性a，但是obj对象拿不到这个属性。
Generator 函数也不能跟new命令一起用，会报错。因为不是构造函数。
那么怎么让 Generator 函数返回一个正常的对象实例，既可以用next方法，又可以获得正常的this？
首先，生成一个空对象，使用call方法绑定 Generator 函数内部的this。这样，构造函数调用以后，这个空对象就是 Generator 函数的实例对象了。
    function* F(){
        this.a=1;
        yield this.b=2;
        yield this.c=3;
    }
    var obj={};
    var f= F.call(obj);
    console.log(f.next());//{value: 2, done: false}
    console.log(f.next());//{value: 3, done: false}
    console.log(f.next());//{value: undefined, done: true}
    console.log(obj.a);//1
    console.log(obj.b);//2
    console.log(obj.c);//3
首先是F内部的this对象绑定obj对象，然后调用它，返回一个 Iterator 对象。这个对象执行三次next方法（因为F内部有两个yield表达式），完成 F 内部所有代码的运行。这时，所有内部属性都绑定在obj对象上了，因此obj对象也就成了F的实例。
执行的是遍历器对象f，但是生成的对象实例是obj，有没有办法将这两个对象统一呢？
一个办法就是将obj换成F.prototype。
    function* F(){
        this.a=1;
        yield this.b=2;
        yield this.c=3;
    }
    var obj={};
    var f= F.call(F.prototype);
    console.log(f.next());//{value: 2, done: false}
    console.log(f.next());//{value: 3, done: false}
    console.log(f.next());//{value: undefined, done: true}
    console.log(f.a);//1
    console.log(f.b);//2
    console.log(f.c);//3
再将F改成构造函数，就可以对它执行new命令了。
    function* gen(){
        this.a=1;
        yield this.b=2;
        yield this.c=3;
    }
    function F(){
        return gen.call(gen.prototype);
    }
    var f=new F();
    console.log(f.next());//{value: 2, done: false}
    console.log(f.next());//{value: 3, done: false}
    console.log(f.next());//{value: undefined, done: true}
    console.log(f.a);//1
    console.log(f.b);//2
    console.log(f.c);//3

十一、Thunk 函数

Thunk 函数是自动执行 Generator 函数的一种方法。
JS语言是传值调用，它的 Thunk 函数含义有所不同。在JS中，Thunk 函数替换的不是表达式，而是多参数函数，将其替换成一个只接受回调函数作为参数的单参数函数。

    //多参数版本的readFile
    fs.readFile(fileName,callback);
    //Thunk版本（单参数版本）的readFile
    var Thunk=function(fileName){
        return function(callback){
            return fs.readFile(fileName,callback);
        };
    };
    var readFileThunk=Thunk(fileName);
    readFileThunk(callback);

fs模块的readFile方法是一个多参数函数，两个参数分别为文件名和回调函数。经过转换器处理，它变成了一个单参数函数，只接受回调函数作为参数。这个单参数版本，就叫做 Thunk 函数。
封装成一个thunk函数

    const thunk = function (fileName, codeType) {
        // 返回一个只接受 callback 参数的函数
        return function (callback) {
            fs.readFile(fileName, codeType, callback)
        }
    }
    const readFileThunk = thunk('data1.json', 'utf-8')
    readFileThunk((err, data) => {
        // 获取文件内容
    })

任何函数，只要参数有回调函数，就能写成 Thunk 函数的形式。

    //dom元素监听
    let button=document.createElement("button");
    button.innerText="按钮";
    let thunk=function (obj,type,captrue){
        return function (callback){
            obj.addEventListener(type,callback,captrue);
        }
    }
    let thunkEvent=thunk(button,'click',false);
    thunkEvent(function (e){
        console.log(e);
    });
    document.body.appendChild(button);