美文网首页
EcmaScript6一看就会的Proxy代理

EcmaScript6一看就会的Proxy代理

作者: LeeYaMaster | 来源:发表于2019-05-16 22:27 被阅读0次

    这段代码总结了Proxy对对象拦截的增,删,查,改,遍历操作,Proxy可以看成是一个拦截器,可以对代理的对象的操作,进行一个拦截,设计模式为代理模式,类似于面向切面编程。

                let obj = {
                    name: 'zhangsan',
                    number: '18',
                    _number: 123456
                };
    
                let monitor = new Proxy(obj, {
                    // 拦截对象属性的读取
                    get(target, key) {
                        return target[key].replace('18', '20');
                    },
                    // 拦截对象设置属性
                    set(target, key, value) {
                        if(key === 'name') {
                            return target[key] = value;
                        } else {
                            return target[key];
                        }
                    },
                    // 拦截key in object操作
                    has(target, key) {
                        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) {
                        return Object.keys(target).filter(item => item != 'name');
                    }
                });
                //测试get,正则,转换为20成功。
                console.log('get', monitor.number);
                //测试set,防止了设置number,设置姓名成功。
                monitor.number = '30';
                monitor.name = 'lisi';
                console.log('set', monitor.number, monitor.name);
                //测试has查找,只能查找name,其他不能查找。
                console.log('has', 'name' in monitor, 'number' in monitor);
                //测试其他方法,遍历,过滤,只选出不等于name的,成功。
                console.log('ownKeys', Object.keys(monitor));
                //测试删除,只能删除带有_的
                delete monitor.number;
                console.log('delete',monitor);
                delete monitor._number;
                console.log('delete',monitor);
    

    代码如上,一个对象的增删查改遍历代理,就这样完成了。

    相关文章

      网友评论

          本文标题:EcmaScript6一看就会的Proxy代理

          本文链接:https://www.haomeiwen.com/subject/kyfgaqtx.html