Proxy和Reflect的使用

在ES6中新增了Proxy这个类及Reflect这个对象

Proxy用来代理对象监视对象的作用

Reflect上有操作对象的一些方法 这些方法对应了Proxy上捕获器的方法

Proxy: 监视代理对象

const obj = {
    name: '小明',
    age: 18
}

在js中如果要监听一个对象的一些响应式就可以用到Proxy Vue3响应式原理就是使用的Proxy

Proxy 是一个类 创建时需要传入俩个参数 :
1为需要监听的对象 2为捕获器方法对象 有13个捕获器方法 在此列举四个捕获器方法，其他捕获器方法关于原型的，感兴趣的可以查下其他资料 常用的就为下面四个

// 创建一个对象
const obj = {
    name: '小明',
    age: 18
};
// new一个Proxy 用来监视obj对象
const proxy = new Proxy(obj, {
    // 这些捕获器方法会在对所监视的对象进行相对操作时 被回调

    // 一：获取对象属性时的捕获器方法：
    // 参数说明：1为所监视的对象，2为操作时对象的key，3为new出的代理对象
    get(e,k,r) {
        console.log(e,`对象被获取了${k}的值为：${e[k]}`);
        // return e[k];
        // 利用Reflect
        Reflect.get(e,k,r); 
    },

    // 二：设置或修改对象属性时的捕获器方法：
    // 参数说明：1为所监视的对象，2为操作时对象的key，3为设置或修改时的值，4为new出的代理对象
    set(e,k,n,r) {
        console.log(e,`对象被设置了${k}的值为：${n}`);
        // e[k] = n;
        // 利用Reflect
        Reflect.set(e,k,n,r); 
    },

    // 三：查询对象属性时的捕获器方法
    // 参数说明：1为所监视的对象，2为操作时对象的key
    has(e,k) {
        console.log(e,`对象被查看是否当前有${k}这个属性`);
        // 返回布尔类型 true/false
    },

    // 四：删除对象属性时的捕获器方法
    // 参数说明：1为所监视的对象，2为操作时对象的key
    deleteProperty(e,k) {
        console.log(e,`对象被删除了${k}这个属性`);
        // delete e[k];
        // 利用Reflect
        Reflect.deleteProperty(e,k);
    },
});

// 操作：

console.log(proxy.name);   // 此时会回调触发proxy里get捕获器方法
proxy.age = 22;            // 此时会回调触发proxy里set捕获器方法
console.log('girlFriend' in proxy); // 返回布尔类型 true/false 可做条件编译来使用 
if('girlFriend' in proxy); // 此时会回调触发proxy里has捕获器方法
delete proxy.age;          // 此时会回调触发proxy里delterProperty捕获器方法 

对于捕获器get和set方法最后一个参数：new出来的代理对象的解释：

Reflect有一个construct方法，当使用构造函数时 new出来的对象类型想要指向另一个构造函数时就可以用到construct这个方法

function Man(name,age) {
    this.name = name;
    this.age = age;
}

function Woman() {
    
}

const c = new Man('c',30)
console.log(c)
// 此时c的类型为Man 想要指向Woman 就可以用到Reflect上的construct方法

// construct方法会返回一个新的对象 
// 参数说明：1参为new时的构造函数名，2参为new时需要传入的属性值，3为需要类型指向的构造函数名
const ck = Reflect.construct(Man,['c',30],Woman)

console.log(ck) 
// 此时ck的类型就为Woman类型 
console.log(ck.__proto__ === Woman.prototype) 
// 验证下： 此时ck的隐式原型和Woman的原型属性是绝等的 也就是说隐式原型指向的是Woman的原型属性

在ES6类中 ES6类的代码转ES5构造函数的源码 实现继承时就使用了Reflect上的construct方法来实现