es6之代理、反射和generator函数

柔情只为你懂 2022-09-12 06:58 131阅读 0赞

# 一、proxy #

proxy可以理解成在目标对象设置一层拦截

代理：

## 1、对象 setter、getter ##

## 2、函数apply ##

## 3、constructor ##

`construct()`方法用于拦截`new`命令，下面是拦截对象的写法。

const handler = { 
      construct (target, args, newTarget) { 
        return new target(...args);
      }
    };

`construct()`方法可以接受三个参数。

*  `target`：目标对象。
 *  `args`：构造函数的参数数组。
 *  `newTarget`：创造实例对象时，`new`命令作用的构造函数（下面例子的`p`）。
    
        const p = new Proxy(function() { }, { 
            construct: function(target, args) { 
                console.log('called:' + args.join(','));
                return {  value: args[0] * 10 }
            }
        });
        (new p(1)).value//called:1

`construct()`方法返回的必须是一个对象，否则会报错。

# 二、 反射 #

与代理一一对应。为代理提供更简便的方法：操作set/get/apply/constructor方法

## 1、操作set、get方法： ##

## 2、 操作apply方法 ##

## 3、操作construct方法 ##

`Reflect.construct`方法等同于`new target(...args)`，这提供了一种不使用`new`，来调用构造函数的方法

function Girl(name) { 
        this.name = name;
    }
    // new的写法
    const instance = new Girl('zs');
    
    // Reflect.construct写法
    //如果Reflect.construct（）方法的第一个参数不是函数，会报错
    const instance2 = Reflect.construct(Girl, ['nn']);

# 三、generator函数 #

Generator 函数是一个普通函数，但是有两个特征。一是，关键字与函数名之间有一个星号；二是，函数体内部使用`yield`表达式，定义不同的内部状态（`yield`在英语里的意思就是“产出”）。

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

## 1、迭代器的本质相当于一个generator函数 ##

function* foo() { 
        yield 'terray';
        console.log('hello terray');
        yield 'larry';
        yield 'tom';
    }
    let result = foo();
    
    // console.log(...result);
    console.log(result[Symbol.iterator]());//Object [Generator] {}
    console.log(result.next());//
    console.log(result.next());//hello terray

**手动实现类数组的一个函数，并且该构造函数实现了Symbol.iterator的接口**

class mySet { 
    
        constructor(args) { 
                for (let i = 0; i < args.length; i++) { 
                    let val = args[i];
                    this[i] = val;
                }
    
                //要将length变成不可迭代的属性
                Object.defineProperty(this, 'length', { 
                    configurable: true,
                    enumerable: false,
                    value: args.length
                });
                // this.length = args.length;
    
    
            }
            //请你实现迭代函数
            *
            [Symbol.iterator]() { 
                for (let k in this) { 
                    let v = this[k];
                    let index = parseInt(k);
                    yield {  value: v, done: index < this.length ? false : true }
                }
    
    
            }
    
    }
    let set = new mySet(['terry', 'zs']);
    console.log(set);
    for (let k of set) { 
        console.log(k);
    }

## 2、next参数 ##

next参数可以作为上一个yield表达式的返回值

function* foo() { 
        let resp = yield "hello";
        console.log('1111', resp);
        yield 'world';
    }
    let i = foo();
    let a = i.next(); //{value:'hello',done:false}
    i.next(a); //{value:'world',done:false}

结果：

![在这里插入图片描述][c7b28700b0fd4ae29f780f101ce9c586.png_pic_center]

## 3、用作异步操作的同步化 ##

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

//成员方法依赖实例的创建
    let axios = require('axios') //引入axios
    let p1 = axios({ 
        url: 'http://ip:端口号/index/carousel',
        method: 'GET'
    
    });
    let p2 = axios({ 
        url: 'http://ip:端口号/index/category',
        method: 'GET'
    
    });
    //使用generator函数，实现代码的依次执行
    function* foo() { 
        let resp1 = yield p1;
        console.log(resp1);
        let resp2 = yield p2;
        console.log(resp2);
    
    }
    let iterator = foo();
    //当盘p1执行完毕后，我再执行p2
    //{value:p1,donr:false}
    iterator.next().value.then(resp => { 
        //{value:p2,donr:false}
        iterator.next(resp.data).value.then(res => { 
            iterator.next(res.data);
        })
    });

[c7b28700b0fd4ae29f780f101ce9c586.png_pic_center]: /images/20220828/1b644088692e4b1bad47bb4421a77a07.png