您好,欢迎访问一九零五行业门户网

ES6中Proxy和Reflect的介绍(代码示例)

本篇文章给大家带来的内容是关于es6中proxy和reflect的介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
proxy代理
{    // 原始对象,或者真实数据,可以理解为供应商    let obj = {        time: '2018-10-05',        name: 'lucy',        age: 16,        _is: true    };    // 代理对象,可以理解为代理商,对用户来说,直接操作monitor,而不能直接操作obj    let monitor = new proxy(obj, {        // 拦截对象属性的读取        get(target, key) {            return target[key].replace('2018', '2019');        },        // 拦截对象设置属性        set(target, key, value) {            // 只让用户修改name属性,其他的不允许修改            if (key === 'name') {                return target[key] = value;            } else {                return target[key];            }        },        // 拦截 key in object 操作        has(target, key) {            // 只暴露name属性,其他的都不暴露            if (key === 'name') {                return target[key];            } else {                return false;            }        },        // 拦截delete        deleteproperty(target, key) {            // 属性名以_下划线开头的,就允许删除,否则不允许删除            if (key.indexof('_') > -1) {                delete target[key];                return true;            } else {                return target[key];            }        },        // 拦截object.keys object.getownpropertysymbols, object.getownpropertynames        ownkeys(target) {            // 拦截了time属性            return object.keys(target).filter(item => item != 'time');        }    });    console.log('get', monitor.time); // 2019-10-05    monitor.time = '2020';    monitor.name = 'can';    console.log('set', monitor.time, monitor.name); // 2019-10-05 can    console.log('has', 'name' in monitor, 'time' in monitor); // true false    delete monitor.time;    delete monitor._is;    console.log(monitor); // proxy {time: 2018-10-05, name: can, age: 16}    console.log('ownkeys', object.keys(monitor)) // [name, age]}
reflect反射
反射的是 object,reflect的方法跟proxy一样,都有get,set,has...
{    let obj = {        time: '2018-10-05',        name: 'ahhh',        age: 16,        _is: true    };    console.log(reflect.get(obj, 'time')); // 2018-10-05    reflect.set(obj, 'name', 'lxc');    console.log(obj); // {time: 2018-10-05, name: lxc, age: 16, _is: true}    console.log(reflect.has(obj, 'name')); // true}
数据校验例子{    function validator(target, validator) {        return new proxy(target, {            _validator: validator,            // 对set进行拦截            set(target, key, value, proxy) {                if (target.hasownproperty(key)) {                    let va = this._validator[key]; // 拿到_validator配置好的方法                    if (!!va(value)) {                        // 允许修改                        return reflect.set(target, key, value, proxy);                    } else {                        // 抛出异常                        throw error(`不能设置${key}到${value}`);                    }                } else {                    throw error(`${key} 不存在`);                }            }        });    }    const personvalidators = {        name(val) {            // 如果name设置为字符串,则允许修改,否则抛出异常            return typeof val === 'string';        },        age(val) {            // 如果age设置为数值类型并且大于18,则允许修改,否则抛出异常            return typeof val === 'number' && val > 18;        }    };    class person {        constructor(name, age) {            this.name = name;            this.age = age;            // 返回了一个proxy对象,用户操作的并不是person这个实例,而是这个实例的代理对象            return validator(this, personvalidators);        }    }    const person = new person('haha', 18);    console.log(person); // proxy {name: haha, age: 18}    // person.name = 46; // 不能设置name到46    // person.age = 20; // 不能设置age到12    // person.number = 111; // number 不存在    person.name = 'yoyo';    person.age = 20;    console.log(person); // proxy {name: yoyo, age: 20}}
以上就是es6中proxy和reflect的介绍(代码示例)的详细内容。
其它类似信息

推荐信息