欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6入门系列 ----- Reflect

程序员文章站 2022-03-22 12:46:21
Reflect 是ES6 为了操作对象而提供的新的API, 目的是: 现阶段某些方法同时在Object , Reflect 上部署, 未来的新方法将只在Reflect对象上部署,也就是说 从Reflect对象上可以获得语言内部的方法。 2. 修改某些Object 方法的返回结果,让其变得更合理。 3 ......

  reflect   是es6 为了操作对象而提供的新的api, 目的是:

  1. 将object 上一些明显属于语言内部的方法,比如 object.defineproperty  放到 reflect对象上

现阶段某些方法同时在object  ,  reflect 上部署,  未来的新方法将只在reflect对象上部署,也就是说

从reflect对象上可以获得语言内部的方法。

         2. 修改某些object 方法的返回结果,让其变得更合理。

    3.让object的操作都变成函数行为。某些object操作是命令式,比如name in obj   和  

delete obj[name],    而reflect.has(obj, name)  和  reflect.deleteproperty(obj, name)  让它们变成了函数行为。

   4.reflect 对象的方法与proxy 对象的方法一一对应, 只要是proxy 对象上的方法, 就能在reflect 对象上找到对应的方法。这就使proxy对象可以方便地调用对应reflect的方法来完成默认行为,作为修改行为的基础。无论proxy怎么修改默认行为,我们总可以在reflect上获取默认行为。

      看个例子:

  

const des = {
    name: 'liu',
    age: 18
};
const newdes = new proxy(des, {
    set: function (target, name, value, receiver) {
        let res = reflect.set(target, name, value, receiver);
        // 额外行为
        if (res) {
            console.log(res)
            reflect.set(target, 'age', 80, receiver);
        }
        return res
    }
});
console.log(newdes);
newdes.name = 'xxxx';
console.log(newdes);

我们对  对象des  的set 方法  做了一层拦截, 每当newdes 设置值的时候,我们先用

reflect.set() 保证默认行为, 默认行为成功后 再执行我们的额外行为,也就是把age 变成80.

看下执行结果:

ES6入门系列   -----    Reflect

ok , 默认行为name设置成功, 额外行为age也设置成功,

我们还可以代理对象内部的其他方法:

const des = {
    name: 'liu',
    age: 18
};
const newdes = new proxy(des, {
    set(target, name, value, receiver) {
        let res = reflect.set(target, name, value, receiver);
        // 额外行为
        if (res) {
            console.log(res);
            reflect.set(target, 'age', 80, receiver);
        }
        return res
    },
    deleteproperty(target, p) {
        console.log('delete ' + p);
        return reflect.deleteproperty(target, p);
    },
    get(target, p, receiver) {
        console.log('get ' + p);
        return reflect.get(target, p, receiver);
    }
});
const name = newdes.name;
delete newdes.age;

拦截对象的get方法 和 delete 指令

结果:

ES6入门系列   -----    Reflect

拦截成功。