Proxy代理对象

2020-04-22  本文已影响0人  此人已失联好几天

Proxy 对象为ES6的新代理对象,及其类似于ES5中的Object.defineProperty的对象劫持,但是又区别于Object.defineProperty
在MDN中是这样描述Proxy的

Proxy 对象用于定义基本操作的自定义行为(如属性查找、赋值、枚举、函数调用等)。

本文中出现的Reflect对象在本文中不会着重介绍,如果感兴趣的童鞋可以移步小进进不将就ES6之Reflect介绍,建议瞅一眼,挺好用的一个对象
        // 数据对象
        let obj = {
            name: '张三',
            age: 28,
            sex: 'male',
            grade: '三年级',
            father: '张大炮'
        };
        // 实例 
        let proxy = new Proxy(obj, {
            /*
             * target === obj
             * key === key
             * value === value
             * receiver === proxy变量
             * */
            // 当获取proxy身上的数据时会触发 get 方法
            get(target, key, receiver) {
                // Reflect 在未来有可能会替代 Object 对象
                // Reflect.get方法会在映射对象身上找该属性,当数据源身上有该属性时返回true,没有则返回false
                let res = Reflect.get(target, key, receiver);
                if(!res) {
                    throw `get ${ key } error`;
                }
                console.log('获取');
                return res;
            },
            set(target, key, value, receiver) {
                // Reflect.set方法会在映射对象身上找该属性,并赋值,如果赋值成功或者在对象上增加属性并赋值则返回true,赋值失败则返回false(如:Object.defineProperty中把对象属性设置writable:false时)
                let res = Reflect.set(target, key, value, receiver);
                if(!res) {
                    throw `set ${ key } error`;
                }
                console.log('设置');
                return res;
            },
            deleteProperty(target, key) {
                // Reflect.deleteProperty方法会在映射对象身上找该属性,并删除该属性,删除成功返回true,删除失败则返回false(如:Object.defineProperty中把对象属性设置configurable:false时)
                let res = Reflect.deleteProperty(target, key);
                if(!res) {
                    throw `delete ${ key } error`;
                }
                console.log('删除');
                return res;
            }
        });

        console.log(proxy.name);
        proxy.name = '李四';
        delete proxy.father
        proxy['lastName'] = 'Xu';
        console.log(proxy);
        console.log(obj);
console
上一篇 下一篇

猜你喜欢

热点阅读